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
@@МаксВолков-э6и Добрый вечер! Этот метод в итоге не пробовал, решил использовать Next.js, всё таки это более распространенное решение, много примеров как и что правильно делать
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
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)
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.
по сути мы юзаем реакт как эдакий шаблонизатор. В случае с использованием React всё просто. Было бы круто увидеть сср с подключением Redux - там уже не всё так очевидно ))
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.
Super! The best short explanation on youtube. Отлично! Побил даже учителей с Udemy. Немного суховато в конце. Было бы неплохо прогнать Клиентскую программу рядом с SSR и сравнить.
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
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
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?
Joao Paulo Furtado well, there is razzle, and i have a video about that as well, or you can use next js as you recommended. The point of this video is to demonstrate how ssr works internally
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?
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?
@@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.
@@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?
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.
@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?
@@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.
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
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!
this is the most straightforward to the point tutorial i've ever seen just amazing bro
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
Хорошее видео, четко и по делу без лишней воды, шуток-прибауток и мычания!
exactly
@Snake ETH лично я дохуя чего не понял, но я ни разу не лез в бек, поэтому хз в ком проблема
Great video! You simplified it a lot compared to some of the other articles/videos I watched for React SSR.
Yeah!
For those who would wonder how to update the website after you edited the app, simple rebuild it then re run ssr
I think I just learned THE DIM MAK on this page... thank you so much, you are LORD!
This video is perfect! Very simple and straight to the point.
I am short of words man. It feels like dream come true.
This helped understand SSR better, thank you
Просто великолепно, начал сейчас учить реакт в связке MERN и мне очень важен SSR для СЕО, а тут все так понятно, спасибо за качественный контент)
А этот метод Вам помог? Для меня тоже очень важен ceo, а писать приложения на next js не особо хочется
@@МаксВолков-э6и Добрый вечер! Этот метод в итоге не пробовал, решил использовать Next.js, всё таки это более распространенное решение, много примеров как и что правильно делать
@@sanyokes Спасибо за ответ!
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
Simple code! Love it. Could you make a tutorial how to use it along with React-Helmet? Thanks!
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
You are legend, thank you for explaining it in simple terms !
Jan Horak thanks 😊
Thanks a lot for the explanation. I finally got it working!
Good and straight forward explaination
Best video i just glad to know your channel
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.
Damn! Rare content, and very well done too!
Really straightforward explanations. Thanks a lot !
you look like theon greyjoy from game of thrones any way nice explanation
по сути мы юзаем реакт как эдакий шаблонизатор. В случае с использованием React всё просто. Было бы круто увидеть сср с подключением Redux - там уже не всё так очевидно ))
Да, можно watering редакс стора рассмотреть
good video. Can you have TypeScript version?
amazing man... its interesting and you are the smart guy..
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.
Ok, this just demystified ssr for me. Thank you!!
Loved the style, cheers mate!
какой классный тяжелый русский акцент, чувак ты ахуенен
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?
Super! The best short explanation on youtube. Отлично! Побил даже учителей с Udemy.
Немного суховато в конце. Было бы неплохо прогнать Клиентскую программу рядом с SSR и сравнить.
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?
Hoped you explained more. Helpful video nonetheless.
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
sir showing error Warning: Expected server HTML to contain a matching in .
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?
I am using react router and getting error when I am trying to run in SSR mode
Great and clean tutorial. Thank you 🙏
🤩
Thank you! This was very useful as a beginner.
thanks dude its working !
You are a genius. Thank you
Very helpful, thanks Maksim!
You saved me! Thanks a lot
You're welcome!
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?
Straight to the topic.. 🥰🥰
Can you please explain how to create SSR with Routes ? Especially with Router-V6 &&
This was really straightforward and helpful. Thanks!
node_modules was misspelled in the ignore section.
Good job man 😎
your video is awesome, thanks a lot.
You are cool!!!!
Simple and clean code!!!!
Great vid - what plugin are you using on VScode to import/tab to get snippets? Thanks!
thanks for all
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.
Very helpful, thank you!
Btw, the video quality is great. Is just such a nightmare to setup this by hand
Joao Paulo Furtado well, there is razzle, and i have a video about that as well, or you can use next js as you recommended. The point of this video is to demonstrate how ssr works internally
@@satansdeer1 Got it. Nice job, anyway!
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?
thx very much for the tutorial. But what about navigation ? how can i produce SSR with many pages in react ? Thx
Thank you! now I have an image how to use ReactDOMServer and ReactDOM.hydrate guy :D
Error: Cannot find module '/mnt/c/PROJECTS/right now/ssr-example/server/index.js'
tks for the sharing!
Great video!
syntaxe: "node_modules" and not "node_module".
great tutorial but your bottom right corner video layer often covered up the code😥
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.
Great. Thanks. What does ^/$ mean exactly?
I’m wondering how to deploy this set app
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
If Error "React undefined", then "Import React" in every component file specially if you are using React17+
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
I think it does not work for me. Because I did everything, but when I clicked "view source page", it did not change
you look like the guy that kills John Wick's dog. joke aside this video is really helpful.
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?
greate, but how should put it on cpanel host?
I don't know how it will work for the content pages that we are fetching from APIs
63/5000
It worked is that I have to run yarn build and then yarn ssr
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.
Very well done. Is this how NextJS work under the hood?
@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
we should use Server folder instead of build folder for deployment??
Thanks for your efforts 👍
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
When m using Routers in my App.js after hitting localhost:8000 it's giving me an error Browser history needs a DOM
Will withRouter HOC from React-router-dom work in server side rendering as well?
Does it still works if i put it in a diferent directory after running npm run build?
I got an error React not found when running the app. Could you guys help me please?
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
what do you write on minute 9:11? Mine's not working and I don't know if it's because of that
very good solution. is it works redux case?
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!
Can you talk about why would someone go fully this route vs nextjs or gatsby?
Maksim you are Molotok! How do we deploy it? Usually I upload build content to server, but what should I do after your tutorial?
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)
but in next.js
we don't have .build and in public index.html file.
so this will not work
did everything like in a video, "Reference Error: React is not defined", might versions are not matched or something missed ;)
God bless You !
If You would be so kind as to post some extended material using routing, that would be nice
Hoy can you tell me how to deploy it? Thanks!
Maksim, how to resolve "ReferenceError: document is not defined" in this implementation ?
Is this indirect solve for SEO problem ?🤨