React Server Side Rendering Introduction For Beginners - ReactJS ssr with Expressjs
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- 📘New Course: Build full-stack React Typescript applications tsreact.maksim...
Learn how to setup basic server side rendering using ReactJS and Express.
Follow me on Odysee: odysee.com/$/i...
React SSR (Server Side Rendering) is a technique when you pre-render initial state of your application on backend.
It can greatly improve user experience if used correctly.
🐦 Twitter: / ivanov_dev
I write about React and TypeScript there
Code for the tutorial: github.com/sat...
![🎤 จับฉลากร้องเพลง x P’ #XXSIVK [EP.1] (2/2) เพื่อนจับได้คำไหน..ต้องร้องคำนั้น เริ่ม! 💓🎶 #MXFRUIT](http://i.ytimg.com/vi/1bJvMJXmeS4/mqdefault.jpg)
this is the most straightforward to the point tutorial i've ever seen just amazing bro
Хорошее видео, четко и по делу без лишней воды, шуток-прибауток и мычания!
exactly
@Snake ETH лично я дохуя чего не понял, но я ни разу не лез в бек, поэтому хз в ком проблема
For those who would wonder how to update the website after you edited the app, simple rebuild it then re run ssr
Still works. Preparing for interviews, and am looking for easy ways to implement SSR, other than NextJS.
Side for everyone else. Your Index.js on the client-side will look slightly different to the video now:
import { hydrateRoot } from "react-dom/client";
const domNode = document.getElementById("root");
hydrateRoot(
domNode,
);
Happy coding
Great video! You simplified it a lot compared to some of the other articles/videos I watched for React SSR.
Yeah!
Gone are the days we have to use two different servers for the same application. This is so so super simple. I usually don't subscribe after I watch a video. But your channel man, definitely is one any developer has to subscribe to
This video is perfect! Very simple and straight to the point.
Simple code! Love it. Could you make a tutorial how to use it along with React-Helmet? Thanks!
This helped understand SSR better, thank you
I think I just learned THE DIM MAK on this page... thank you so much, you are LORD!
Просто великолепно, начал сейчас учить реакт в связке MERN и мне очень важен SSR для СЕО, а тут все так понятно, спасибо за качественный контент)
А этот метод Вам помог? Для меня тоже очень важен ceo, а писать приложения на next js не особо хочется
@@user-ov5tt6sc2f Добрый вечер! Этот метод в итоге не пробовал, решил использовать Next.js, всё таки это более распространенное решение, много примеров как и что правильно делать
@@sanyokes Спасибо за ответ!
I am short of words man. It feels like dream come true.
I got this to work on the all new "bun.js" runtime, no need for babel but I had to do some modifications. Good Tutorial, thanks
It works fine but i have a little problem. My dotenv-package isn‘t working anymore after implemented react-ssr, do have someone a Tip for me to fix it?
Nice. It would be awesome and then I would subscribe if you took the time to explain why you do it this way. Maybe not every line, but for instance why replacing, why installing hydrate etc
You are legend, thank you for explaining it in simple terms !
Jan Horak thanks 😊
Hello, friend I liked this approach for React SSR, it is very easy to understand, but I could normally use Redux, ReactRouter and Styled-Components, you would have a video that integrates these three points (Redux, ReactRouter and Styled-Components in React SSR)
+1
since ReactDom.hydrate simply makes the components from the client use the HTML generated from the server, it should integrate without any problem with other dependencies.
I am using react router and getting error when I am trying to run in SSR mode
This is great thank you. I see how this renders the HTML on server side. A question is why do we want to ignore styles?
If you watch the whole video, you'll see that inside his server/index.js file at the first line he uses require('ignore-styles'); which is used just to ignore the style
@@baraousseni1686 Yes but ignore the style?
Thank you so much, bro, this video is very helpful for all, and your understanding way is ossom, thanks for sharing this, I request to one thing please can you make a video to CSR to SSR in vuejs, if you do please reply me, thanks a lot.
Best video i just glad to know your channel
Super! The best short explanation on youtube. Отлично! Побил даже учителей с Udemy.
Немного суховато в конце. Было бы неплохо прогнать Клиентскую программу рядом с SSR и сравнить.
Really straightforward explanations. Thanks a lot !
Good and straight forward explaination
thanks for all
Thanks a lot for the explanation. I finally got it working!
Loved the style, cheers mate!
Ok, this just demystified ssr for me. Thank you!!
по сути мы юзаем реакт как эдакий шаблонизатор. В случае с использованием React всё просто. Было бы круто увидеть сср с подключением Redux - там уже не всё так очевидно ))
Да, можно watering редакс стора рассмотреть
🤩
Thank you for this tutorial. Its great! How to add meta tags into the head of the pre-rendered html file, if we replace only root div?
syntaxe: "node_modules" and not "node_module".
amazing man... its interesting and you are the smart guy..
sir showing error Warning: Expected server HTML to contain a matching in .
Damn! Rare content, and very well done too!
you look like theon greyjoy from game of thrones any way nice explanation
node_modules was misspelled in the ignore section.
If Error "React undefined", then "Import React" in every component file specially if you are using React17+
Thank you! 🙏
Hoped you explained more. Helpful video nonetheless.
какой классный тяжелый русский акцент, чувак ты ахуенен
Man You are a Code God.😎. Thanks so so so much. But one more question. Do I need to build my create-react-app anytime I make changes to my Code?
You saved me! Thanks a lot
You're welcome!
Great and clean tutorial. Thank you 🙏
Thank you! This was very useful as a beginner.
Can you please explain how to create SSR with Routes ? Especially with Router-V6 &&
Straight to the topic.. 🥰🥰
You are a genius. Thank you
tks for the sharing!
How do you copy an entire line without selecting all the text?
how do you select an entire line in a mac?
how do you copy a line declaring a function and then only change the name of the function by deleting the entire word?
all those shortcuts man, I'm new to macOS and I don't use VSCode as much, they'd be helpful
Thank you! now I have an image how to use ReactDOMServer and ReactDOM.hydrate guy :D
I think it does not work for me. Because I did everything, but when I clicked "view source page", it did not change
just crazy how much work is required to make this work, i have that you cant just take a already created page and say "this now react SSR" and then it works on your current code
Dude, everything's great and appreciate you for the tutorial, but couple of things are bugging. First, can you make an example with the running react development server rather than build and second using this, it's giving me error that "require is not defined". please help me out with this.
great tutorial but your bottom right corner video layer often covered up the code😥
Very helpful, thanks Maksim!
This was really straightforward and helpful. Thanks!
I don't know how it will work for the content pages that we are fetching from APIs
good video. Can you have TypeScript version?
You are cool!!!!
Simple and clean code!!!!
loved it , have one question though , I'll still need to host both sever and react app separate right ?
Easiest SSR I've ever seen. I wonder if this is thanks to modern tooling; it seemed more difficult 3 years ago.
Outstanding. Thank you.
2022, the code in the repository doesn't work. The explanation is very good, unfortunately it doesn't work in you clone the repo and run it locally
Very very good! I understand the purpose of the video, but I don't understand the hype around SSR these days. It seems like "back to the future". Did I misunderstand anything?
did everything like in a video, "Reference Error: React is not defined", might versions are not matched or something missed ;)
Hi, but this method don't render elements after fetched :(
Hmm, could you please elaborate, what elements?
@@satansdeer1
Hello Maxim, i used axios in componentDidMount. I create table body with the data when bring the result, but unfortunately the created elements not rendering after fetching. I'm leaving the github link below
github.com/Emgeomap/react_ssr
Nice
thanks dude its working !
your video is awesome, thanks a lot.
Great vid - what plugin are you using on VScode to import/tab to get snippets? Thanks!
Very helpful, thank you!
That is working on local server, thanks for making it,
but when we run npm run build, and then npm serve cmd to check dist folder is working or not, it giving me an error (Uncaught TypeError: n.createRoot(...).hydrate is not a function)
please anyone help me
1st of all, thanks so much dude! This is really well explained and written, you've got a new sub that will share this to anyone learning React!
2nd, I have a few issues porting an older project to this. Could the reason be npm?
MerceneX thanks, its hard to tell without seing the project, could you make an example repo with the reproduction of the issue you are having?
@@satansdeer1 Wow, that was lightning fast. Thanks for the response man!
/questions/61227711/problems-migrating-react-to-ssr-import-extends-from-babel-runtime-helpers-es
I've posted the above question on stackoverflow already. The github repo link is in there as well. If you're interested in discussing this further? :)
And really, thank you again.
MerceneX I'll try to take a look later
@@satansdeer1 Thank you
@@mercenex6329 yo, i've checked your repo, I the scripts there don't seem to have `ssr` option. Am I looking in a wrong place, or is there something missing?
how to render react for differend routes in the same server ?
Error: Cannot find module '/mnt/c/PROJECTS/right now/ssr-example/server/index.js'
you look like the guy that kills John Wick's dog. joke aside this video is really helpful.
we should use Server folder instead of build folder for deployment??
Thanks for your efforts 👍
Hi thanks for video but i have a issue like:
ssr: `node server/index.js`
problem with npm. There is likely additional logging output above.
When m using Routers in my App.js after hitting localhost:8000 it's giving me an error Browser history needs a DOM
Great video!
Support for the experimental syntax 'classProperties' isn't currently enabled , getting this error
I got an error React not found when running the app. Could you guys help me please?
I was receiving an error when running `npm start` with this as hydrate could not match anything (the locally served files skip the express backend!).
My fix has been to query the environment, i.e. if (process.env.NODE_ENV && process.env.NODE_ENV === 'production')
Where true I am hydrating, where false I am rendering.
To me this seems like a good way of keeping the benefits of the dev server (hot reload) whilst not impeding the built ssr behaviour, can you think of any drawbacks or alternatives?
I’m wondering how to deploy this set app
Good job man 😎
63/5000
It worked is that I have to run yarn build and then yarn ssr
👏
Error: Cannot find module 'app/theme'
Require stack:
- D:\F88Projects\WebPartner\src\App.js
- D:\F88Projects\WebPartner\server\server.js
- D:\F88Projects\WebPartner\server\index.js
I get error when run ssr ??
Please help me!
what do you write on minute 9:11? Mine's not working and I don't know if it's because of that
Kindly Make an other video that how can we use react helmet with ssr??
import logo from './logo.svg'
the above is not working. Image is not being loaded into the browser. Could you please help me with this?
Simply delete both JSX tags mate along with the logo.svg file
Then it should work (:
@Maksim Ivanov How to put this code on production mode on hosting server because we are just putting build folder content on server how server/server.js read App component is this case?
That's what I'm wondering too, did you find the solution?
@@thatcoul we have to put all folders on to server. Like we setup on local as same we have to setup on other server like digital ocean node server etc.
@@kalpittandon8999 Thanks
@@thatcoul any time
God bless You !
If You would be so kind as to post some extended material using routing, that would be nice
greate, but how should put it on cpanel host?
Can you give an example with using an API to get the data and render that data server side?
This's not working because i tried (Sorry if my english is bad)
Hey dude, I don't get from where the build thing comes, can you explain? Like there is no build folder in the repo at all
LocalStorage WrongReferenceError error, how can I insert normal js function,
window is undefined , how to solve this problem? pls tell me if anyone knows
Maksim, how to resolve "ReferenceError: document is not defined" in this implementation ?
Hi, I am getting an error saying React is not defined.
How to solve this?