React Server Side Rendering Introduction For Beginners - ReactJS ssr with Expressjs

📘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...

[@HarshSingh-hk8fe]

this is the most straightforward to the point tutorial i've ever seen just amazing bro

[@obednuertey6162]

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

[@obednuertey6162]

I am short of words man. It feels like dream come true.

[@gooddha]

Хорошее видео, четко и по делу без лишней воды, шуток-прибауток и мычания!

[@adhamahmed3300]

exactly

[@1001-w5q]

@Snake ETH лично я дохуя чего не понял, но я ни разу не лез в бек, поэтому хз в ком проблема

[@atg1203]

Great video! You simplified it a lot compared to some of the other articles/videos I watched for React SSR.

[@NishantTilve]

Yeah!

[@joantonio6331]

For those who would wonder how to update the website after you edited the app, simple rebuild it then re run ssr

[@yt-sh]

This helped understand SSR better, thank you

[@mohamethseck]

This video is perfect! Very simple and straight to the point.

[@CoderDmitri]

I think I just learned THE DIM MAK on this page... thank you so much, you are LORD!

[@elite.topmotivation]

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

[@akhlakpatel921]

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.

[@sanyokes]

Просто великолепно, начал сейчас учить реакт в связке MERN и мне очень важен SSR для СЕО, а тут все так понятно, спасибо за качественный контент)

[@МаксВолков-э6и]

А этот метод Вам помог? Для меня тоже очень важен ceo, а писать приложения на next js не особо хочется

[@sanyokes]

@@МаксВолков-э6и Добрый вечер! Этот метод в итоге не пробовал, решил использовать Next.js, всё таки это более распространенное решение, много примеров как и что правильно делать

[@МаксВолков-э6и]

@@sanyokes Спасибо за ответ!

[@charlievered3899]

Thanks a lot for the explanation. I finally got it working!

[@janhorak7317]

You are legend, thank you for explaining it in simple terms !

[@satansdeer1]

Jan Horak thanks 😊

[@prakharagrawal8983]

Good and straight forward explaination

[@09sangram]

I am using react router and getting error when I am trying to run in SSR mode

[@yanifernandez6110]

amazing man... its interesting and you are the smart guy..

[@sayandcode]

Damn! Rare content, and very well done too!

[@igniousprogrammerip3536]

Best video i just glad to know your channel

[@nuyi9411]

Simple code! Love it. Could you make a tutorial how to use it along with React-Helmet? Thanks!

[@userfpdnbknsdbmfn]

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?

[@sharkdeng9253]

good video. Can you have TypeScript version?

[@iurysza]

Loved the style, cheers mate!

[@BlurryBit]

Ok, this just demystified ssr for me. Thank you!!

[@dominicsosnov]

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

[@MichaelSalo]

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?

[@baraousseni1686]

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

[@winnerleparadoxe6496]

@@baraousseni1686 Yes but ignore the style?

[@Arthur-ql5vg]

Really straightforward explanations. Thanks a lot !

[@anl6777]

You saved me! Thanks a lot

[@satansdeer1]

You're welcome!

[@jeromelanteri6469]

syntaxe: "node_modules" and not "node_module".

[@ahmadkhan-xn2nk]

sir showing error Warning: Expected server HTML to contain a matching in .

[@buddycake1009]

You are a genius. Thank you

[@lenguajesdeprogramacionson5050]

I’m wondering how to deploy this set app

[@adwaithks]

Straight to the topic.. 🥰🥰

[@alexon2010]

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)

[@AjithKumarsham]

+1

[@vitorfigueiredomarques2004]

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.

[@rohansadhukhan3028]

thanks dude its working !

[@unnikrishnan1729]

Good job man 😎

[@Vasuchowdary]

you look like theon greyjoy from game of thrones any way nice explanation

[@devmike233]

Hoped you explained more. Helpful video nonetheless.

[@arny699]

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?

[@arturgorbunov3792]

Can you please explain how to create SSR with Routes ? Especially with Router-V6 &&

[@sergeyfilat4238]

Super! The best short explanation on youtube. Отлично! Побил даже учителей с Udemy. Немного суховато в конце. Было бы неплохо прогнать Клиентскую программу рядом с SSR и сравнить.

[@nitindaphale2008]

If Error "React undefined", then "Import React" in every component file specially if you are using React17+

[@pweezy001]

Thank you! 🙏

[@simongomes5671]

I don't know how it will work for the content pages that we are fetching from APIs

[@kalpittandon8999]

@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]

That's what I'm wondering too, did you find the solution?

[@kalpittandon8999]

@@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.

[@thatcoul]

@@kalpittandon8999 Thanks

[@kalpittandon8999]

@@thatcoul any time

[@HeitorYT]

Does it still works if i put it in a diferent directory after running npm run build?

[@mohaimin13]

Thank you! This was very useful as a beginner.

[@obednuertey6162]

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?

[@yuvrajagarkar8942]

loved it , have one question though , I'll still need to host both sever and react app separate right ?

[@noherczeg]

node_modules was misspelled in the ignore section.

[@bmsfx]

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

[@jamiemcgrory1964]

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?

[@vladia391]

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

[@ceza121121]

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.

[@haskell3702]

Do we only need use hydration on root?

[@eccheong]

How do you configure your editor to be able to switch between navigating the cursor and typing?

[@abdulsametsahin1604]

Great and clean tutorial. Thank you 🙏

[@DeepeshGidwani]

Maksim, how to resolve "ReferenceError: document is not defined" in this implementation ?

[@tedo9425]

how can i use css with this tutorial?

[@laurenc180]

Great vid - what plugin are you using on VScode to import/tab to get snippets? Thanks!

[@trendnowinind]

Hi , The above code works well in the localhost port :8000 but not in production, how do we enable in production mode?

[@fb_a]

what if we use react routes? how will it know which page should be created initially?

[@MIHANIZM56]

по сути мы юзаем реакт как эдакий шаблонизатор. В случае с использованием React всё просто. Было бы круто увидеть сср с подключением Redux - там уже не всё так очевидно ))

[@satansdeer1]

Да, можно watering редакс стора рассмотреть

[@deepbaaaaaag]

🤩

[@pokegaiyui]

Can you talk about why would someone go fully this route vs nextjs or gatsby?

[@huynhdan8092]

Can redux and routing be used?

[@tarunteja28]

Hi, I am getting an error saying React is not defined. How to solve this?

[@raorobin0]

Support for the experimental syntax 'classProperties' isn't currently enabled , getting this error

[@prachigarg7161]

Will withRouter HOC from React-router-dom work in server side rendering as well?

[@oleksii.shkulipa]

thx very much for the tutorial. But what about navigation ? how can i produce SSR with many pages in react ? Thx

[@codefantasy]

Hoy can you tell me how to deploy it? Thanks!

[@corndoggydogdog]

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?

[@СергейСтрокатов-э4д]

Error: Cannot find module '/mnt/c/PROJECTS/right now/ssr-example/server/index.js'

[@NishantTilve]

This was really straightforward and helpful. Thanks!

[@sebastianossandonr]

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

[@alexpineda1720]

your video is awesome, thanks a lot.

[@ishandiablo]

Very helpful, thanks Maksim!

[@parisanaderi1647]

Does this method work on low version of react as v10 ?

[@lynnickwan808]

how to ignore css in typescript for server render?

[@salmanjs2629]

If i want to do server side rendering for specific components, is that possible?

[@FullStackDevGreg]

LocalStorage WrongReferenceError error, how can I insert normal js function,

[@taimoorfarooq8971]

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.

[@rakesh.rankawat]

Can you also suggest its deployment on Vercel?

[@NaminderSingh]

Can we call API and show the response in the ssr itself?

[@reactstack257]

Is this indirect solve for SEO problem ?🤨

[@david-tracy]

Great. Thanks. What does ^/$ mean exactly?

[@gladimirjacobsen6356]

I got an error React not found when running the app. Could you guys help me please?

[@kashtichi]

greate, but how should put it on cpanel host?

[@hotaryuzaki]

You are cool!!!! Simple and clean code!!!!

[@vittoriomorellini1939]

Is it possible SSR with Next.js and .net 6 as the api?

[@debjitsinha1]

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?

[@zathkal4004]

Simply delete both JSX tags mate along with the logo.svg file Then it should work (:

[@yvesgonzaga4223]

Can you give an example with using an API to get the data and render that data server side?

[@cassette7440]

This's not working because i tried (Sorry if my english is bad)

[@sandeeprmohanty123]

can we create post endpoint with this

[@kinekt2000]

какой классный тяжелый русский акцент, чувак ты ахуенен

[@prabdeepdhaliwal9725]

Very helpful, thank you!

[@itsmeshc]

How to do on the hyperlink pages??

[@Lukex29]

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?

[@SangNguyen-gq7wq]

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!

[@abeechr]

Outstanding. Thank you.

[@akhlakpatel921]

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

[@rahil-aliyev]

I think it does not work for me. Because I did everything, but when I clicked "view source page", it did not change