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, всё таки это более распространенное решение, много примеров как и что правильно делать
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 и сравнить.
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?
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
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.
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
@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.
по сути мы юзаем реакт как эдакий шаблонизатор. В случае с использованием React всё просто. Было бы круто увидеть сср с подключением Redux - там уже не всё так очевидно ))
Hi there, does this solution generate html on the serverside? It's not quite clear from the video if it does. Last question can it generate html for a specific component within the react app?
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?
Hello, really nice video but how about pitfalls? There are many issues that cames with SSR and really annoying issues, it forces you run some packages on the server. how can I integrate SSR with React project that has a large code? and does it handy for SEO? how about alternates like pre-rendering?
hey, I know this comment is old, but I have same problem, I want to optimize my SEO, to make my meta images discoverable by Facebook crawlers, seems like I have only 2 options: SSR using express, or pre-render and I have no experience with neither of them. did you figure it out?
@@gogaiosebashvili9487 hi haddad and goga, its good to see you also bumped ontu the same problem. so after reading your comment my innerself insisted to write, did you figured it out?
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
Great video but do we know why webp image and svg files cause errors? these work ok with a create-react-app by default but using this your technique they are not processed by babel.. do I need to add something to server/index.js in the babel/register/presets?
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?
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!
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
Hi wassup.. Can I ask for help.. I've been following your video for SSR react to build a small app however I want to perform some authentication and save data to cookies and send them to the server as well.. and I'm failing to do that coz isomorphic fetch isn't working after I followed your steps to SSR.. can you help
Hi @Maksim Ivanov Really loved the video and implemented the same everything is working as expected. Yet I am facing one issue please let me know if it looks familiar you and any solution to it. In the network tab under preview we can see the html rendered but in my case I see blank page, so anything wrong here ?
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
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!
I am short of words man. It feels like dream come true.
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.
Просто великолепно, начал сейчас учить реакт в связке MERN и мне очень важен SSR для СЕО, а тут все так понятно, спасибо за качественный контент)
А этот метод Вам помог? Для меня тоже очень важен ceo, а писать приложения на next js не особо хочется
@@МаксВолков-э6и Добрый вечер! Этот метод в итоге не пробовал, решил использовать Next.js, всё таки это более распространенное решение, много примеров как и что правильно делать
@@sanyokes Спасибо за ответ!
This helped understand SSR better, thank you
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 😊
For those who would wonder how to update the website after you edited the app, simple rebuild it then re run ssr
Thanks a lot for the explanation. I finally got it working!
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.
Good and straight forward explaination
Simple code! Love it. Could you make a tutorial how to use it along with React-Helmet? Thanks!
Ok, this just demystified ssr for me. Thank you!!
Really straightforward explanations. Thanks a lot !
Loved the style, cheers mate!
Super! The best short explanation on youtube. Отлично! Побил даже учителей с Udemy.
Немного суховато в конце. Было бы неплохо прогнать Клиентскую программу рядом с SSR и сравнить.
amazing man... its interesting and you are the smart guy..
Damn! Rare content, and very well done too!
Thank you! This was very useful as a beginner.
Best video i just glad to know your channel
Hoped you explained more. Helpful video nonetheless.
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?
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?
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
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
Great and clean tutorial. Thank you 🙏
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?
Very helpful, thanks Maksim!
good video. Can you have TypeScript version?
Great vid - what plugin are you using on VScode to import/tab to get snippets? Thanks!
какой классный тяжелый русский акцент, чувак ты ахуенен
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?
@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
sir showing error Warning: Expected server HTML to contain a matching in .
you look like theon greyjoy from game of thrones any way nice explanation
This was really straightforward and helpful. Thanks!
по сути мы юзаем реакт как эдакий шаблонизатор. В случае с использованием React всё просто. Было бы круто увидеть сср с подключением Redux - там уже не всё так очевидно ))
Да, можно watering редакс стора рассмотреть
loved it , have one question though , I'll still need to host both sever and react app separate right ?
Hi there, does this solution generate html on the serverside? It's not quite clear from the video if it does. Last question can it generate html for a specific component within the react app?
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
thx very much for the tutorial. But what about navigation ? how can i produce SSR with many pages in react ? Thx
How do you configure your editor to be able to switch between navigating the cursor and typing?
your video is awesome, thanks a lot.
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?
Maksim you are Molotok! How do we deploy it? Usually I upload build content to server, but what should I do after your tutorial?
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?
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.
Can you please explain how to create SSR with Routes ? Especially with Router-V6 &&
Do we only need use hydration on root?
Great. Thanks. What does ^/$ mean exactly?
If i want to do server side rendering for specific components, is that possible?
You are a genius. Thank you
You saved me! Thanks a lot
You're welcome!
Maksim, how to resolve "ReferenceError: document is not defined" in this implementation ?
Does this method work on low version of react as v10 ?
I don't know how it will work for the content pages that we are fetching from APIs
Can you talk about why would someone go fully this route vs nextjs or gatsby?
Is it possible SSR with Next.js and .net 6 as the api?
Error: Cannot find module '/mnt/c/PROJECTS/right now/ssr-example/server/index.js'
I’m wondering how to deploy this set app
Hello, really nice video
but how about pitfalls?
There are many issues that cames with SSR
and really annoying issues, it forces you run some packages on the server.
how can I integrate SSR with React project that has a large code?
and does it handy for SEO?
how about alternates like pre-rendering?
hey, I know this comment is old, but I have same problem, I want to optimize my SEO, to make my meta images discoverable by Facebook crawlers, seems like I have only 2 options: SSR using express, or pre-render and I have no experience with neither of them. did you figure it out?
@@gogaiosebashvili9487 hi haddad and goga, its good to see you also bumped ontu the same problem.
so after reading your comment my innerself insisted to write, did you figured it out?
Did you find any solution?
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
Hi , The above code works well in the localhost port :8000 but not in production, how do we enable in production mode?
Very helpful, thank you!
Great video but do we know why webp image and svg files cause errors? these work ok with a create-react-app by default but using this your technique they are not processed by babel.. do I need to add something to server/index.js in the babel/register/presets?
Thank you! now I have an image how to use ReactDOMServer and ReactDOM.hydrate guy :D
thanks for all
great tutorial but your bottom right corner video layer often covered up the code😥
how can i use css with this tutorial?
I got an error React not found when running the app. Could you guys help me please?
Support for the experimental syntax 'classProperties' isn't currently enabled , getting this error
Can redux and routing be used?
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)
Can you also suggest its deployment on Vercel?
Easiest SSR I've ever seen. I wonder if this is thanks to modern tooling; it seemed more difficult 3 years ago.
Is this indirect solve for SEO problem ?🤨
what if we use react routes? how will it know which page should be created initially?
Hi, I am getting an error saying React is not defined.
How to solve this?
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 (:
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?
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!
When m using Routers in my App.js after hitting localhost:8000 it's giving me an error Browser history needs a DOM
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
Hi wassup..
Can I ask for help.. I've been following your video for SSR react to build a small app however I want to perform some authentication and save data to cookies and send them to the server as well.. and I'm failing to do that coz isomorphic fetch isn't working after I followed your steps to SSR.. can you help
Outstanding. Thank you.
Hi @Maksim Ivanov
Really loved the video and implemented the same everything is working as expected.
Yet I am facing one issue please let me know if it looks familiar you and any solution to it.
In the network tab under preview we can see the html rendered but in my case I see blank page, so anything wrong here ?
perfect i love it, but how can i do it with react typescipt template !!! i have some problem
hi, actually i am finishing writing js but i have some problems. return res.status(500).send("something"). How can I solve it? can you help me?
Can we call API and show the response in the ssr itself?
thanks dude its working !
greate, but how should put it on cpanel host?
LocalStorage WrongReferenceError error, how can I insert normal js function,
how to ignore css in typescript for server render?
Great video!! but what if I have different routes in my App file? i am facing errors if I am using BrowserRouter.
very good solution. is it works redux case?