React Server Side Rendering - Beginners Guide

In this video you will learn how to implement React server side rendering. You will learn different ways of rendering pages with pros and cons of every variant. Also we will implement server side rendering of the project with Node, Express, React and React Router.
TIMESTAMPS
0:00 Introduction
0:11 Ways of rendering web page
1:31 Single page applications problems
2:37 Server side rendering
3:54 React server side rendering implementation
14:46 Client side changes
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Source code - github.com/monsterlessonsacad...
STUFF I USE
► My imac for home on Amazon - amzn.to/3MgtZAC
► Mac macbook to go on Amazon - amzn.to/3yr3UJg
► My monitors on Amazon - amzn.to/3yw6lKD
► My mouse on Amazon - amzn.to/3CEFCNt
► My keyboard on Amazon - amzn.to/3fOzNVL
► My monitor arm on Amazon - amzn.to/3CHr5BA
► My speakers on Amazon - amzn.to/3T4uf7W
► My coffee machine on Amazon - amzn.to/3rI9DGQ
► My Synology NAS on Amazon - amzn.to/3MjIpQz
► My Seagate IronWolf 4TB HDD on Amazon - amzn.to/3Cndm1B
► My external SSD drive on Amazon - amzn.to/3rFPQb1
► My external HDD drive on Amazon - amzn.to/3MmrsVE
► My microphone - amzn.to/3SMCE08
► Audio interface - amzn.to/3ecWv9O
► Camera - amzn.to/3RNOLIM
Disclosures: All opinions are my own. Sponsors are acknowledged. Some links in the description are affiliate links that if you click on one of the product links, I’ll receive a commission at no additional cost to you. As an Amazon Associate I earn a small commission from qualifying purchases.

[@oynozan]

Great explanation, thanks!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@vinitgupta1648]

Really loved how simple it was and so easy to understand

[@MonsterlessonsAcademy]

Glad to hear that!

[@chris_and_music]

Nice one, I've never tried this approach because I've always used Next JS, but it's great to know this too.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@bellasvideo5620]

Nice explanantion

[@ShabeerAhamed-oi2rv]

greatly explained

[@MonsterlessonsAcademy]

Thank you!

[@skullhunter7342]

Hey please help I'm getting an error of invalid hook and also you didn't show that you installed react and react-dom in the back-end and if I don't install these it's show error of requiring stack!

[@lunner505]

Thanks bro 🙏

[@MonsterlessonsAcademy]

Welcome

[@UsefulClips_]

i tried this but in latest version routing is not working with that images is also not working can you please guide how I solve this issue

[@WhatEver-th8hl]

I want to render some components from server or rest will be render in client

[@animeshbhatt3383]

Thanks for the video. So which is the better option? NextJS or Reactjs SSR? I don't see the pros and cons anywhere in the Internet.

[@MonsterlessonsAcademy]

The better option is to really question if you need ssr. 90% of website don't. It's either markup which can be rendered by any server on dynamic client app like trello with sockets, etc

[@programister42]

Do you have plans to make a video about SSR on Angular? (I mean Angular Universal)

[@MonsterlessonsAcademy]

Thank you for the idea. I added it to the list of future videos.

[@gimp3695]

I’m curious how well this works if your component you load has some useEffects with a async requests that would change the initial view

[@MonsterlessonsAcademy]

useEffect is not called at all in rendering to string on backend as it happens after client render. You can use any additional functions or logic which will resolve requests before creating ssr html page.

[@anusrim9840]

Thanks for the tutorial, it was helpful. There is one thing i would like to point out here. Sitting on the /about route if i hit refresh button on the browser, I get an error "Cannot GET /about". Could you provide a solution to this?

[@lalmimola]

got same problem

[@0xda03]

try changing the order of the two "app.use()" parts, then change the regex "^/$" of the now second one to "*"

[@sliceem88]

Nice tut ! Do u have plans to do some SSR framework like Next, Remix and Gatsby comparison? Or maybe Best practices of SSR ? Or Workshop maybe ?

[@MonsterlessonsAcademy]

Thank you. I have lots of plans but not enough time at the moments.

[@alice6941]

Hello sir, this is a great tutorial! I want to ask, can it be used for data dynamically or calling from an API?

[@MonsterlessonsAcademy]

Yes we can.

[@alice6941]

@@MonsterlessonsAcademy have you ever used vue ssr? Can vue ssr use data dynamically?

[@elchinmammadzade3007]

Can you provide some information on the deployment part? For example how to serve this ssr app with the help of AWS Lambda function

[@MonsterlessonsAcademy]

I will add it to the list of ideas for future videos

[@Hollywoodshits]

Very nice tutorial really help a lot. I am using the rtk query and now stuck as it is not fetching the provider and causing - SyntaxError: Cannot use import statement outside a module Can you help me with some code?

[@martapfahl940]

Haha 3 months ago and now answer, I got the same issue

[@hyphamne]

@@martapfahl940 Haha 1 months ago and now answer, I got the same issue

[@rajatkaushal1127]

Unable to find the App file getting error "Error: Cannot find module '../src/App' "

[@crazymallu14]

can u pls make a video about react js chart with dropdown option using a API🙏

[@MonsterlessonsAcademy]

I already have a video about react charts but without an api. kzbin.info/www/bejne/fZuTi4KoZbNpec0

[@prateeksonar6425]

Cant we user rtk queries for cache management inside this ssr

[@MonsterlessonsAcademy]

On ssr we just build markup and provide initial data that we fetched to the client. So not really.

[@abhijitpatra370]

Please use VS code for thr front-end IDE.

[@huntx...8573]

SyntaxError: Invalid or unexpected token getting this error dk why?

[@iuliancarnaru954]

to load assets we need webpack config? src/App.tsx:2:18 - error TS2307: Cannot find module './logo.svg' or its corresponding type declarations.

[@MonsterlessonsAcademy]

Do you have logo.svg file in the correct place?

[@iuliancarnaru954]

@@MonsterlessonsAcademy in the build folder

[@shaileshchotoe]

can you make a video explaining why implementing the react router on the server doesnt do a full page refresh. or does it? when it does isnt the whole idea of single page application gone??

[@MonsterlessonsAcademy]

There is no magic. If it's server there is page refresh, if it's client we change content with js. With SSR the first render is server and then it's client only.

[@INFINIX69]

ERROR ---> when i click on about it the text changes to about but it shows cannot get /about when i check the page source but in case of home it is working fine

[@UsefulClips_]

same with me

[@vyankateshmiskin9618]

same with me also please share the solution @@UsefulClips_

[@rajeshravichandran6102]

can we have lazy loaded pages in this SSR of react app ?

[@MonsterlessonsAcademy]

Sure

[@g-luu]

Is the channel about react now? Clicked so fast thinking its angular content.

[@MonsterlessonsAcademy]

I was never intended to be just about Angular. It is anything related to web.

[@ismailkaracakaya260]

This will render the entire React app on the server side so if you have big data on your React app the user will wait a long time. You need to ssr individual components only

[@MonsterlessonsAcademy]

Sure. It is just a basic example.

[@joja2174]

NextJS developers watching this: ☕ seriously i just wanted to know how this is done, great video

[@MonsterlessonsAcademy]

Glad you liked it!

[@SixtyNeptune]

why do i get: const worker = new Worker(new URL("../../workers/imageWorker.js", import.meta.url)); ^^^^ SyntaxError: Cannot use 'import.meta' outside a module Help me please

[@MonsterlessonsAcademy]

No idea