React Server Side Rendering

React Server Side Rendering - Beginners Guide

Рет қаралды 27,448

Күн бұрын

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.

Пікірлер: 56

@vinitgupta1648 Ай бұрын

Really loved how simple it was and so easy to understand

@MonsterlessonsAcademy Ай бұрын

Glad to hear that!

@oynozan Жыл бұрын

Great explanation, thanks!

@MonsterlessonsAcademy Жыл бұрын

Glad it was helpful!

@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

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

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

@WhatEver-th8hl 11 ай бұрын

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

@ShabeerAhamed-oi2rv Жыл бұрын

greatly explained

@MonsterlessonsAcademy Жыл бұрын

Thank you!

@bellasvideo5620 11 ай бұрын

Nice explanantion

@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 10 ай бұрын

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

@lunner505 11 күн бұрын

Thanks bro 🙏

@MonsterlessonsAcademy 10 күн бұрын

Welcome

@animeshbhatt3383 2 ай бұрын

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 2 ай бұрын

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

@huntx...8573 Жыл бұрын

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

@rajatkaushal1127 9 ай бұрын

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

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

@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

@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 9 ай бұрын

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

@hyphamne 7 ай бұрын

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

@alice6941 3 ай бұрын

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

@MonsterlessonsAcademy 3 ай бұрын

Yes we can.

@alice6941 3 ай бұрын

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

@shaileshchotoe 13 күн бұрын

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 12 күн бұрын

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.

@rajeshravichandran6102 10 ай бұрын

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

@MonsterlessonsAcademy 10 ай бұрын

Sure

@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 5 ай бұрын

same with me also please share the solution @@UsefulClips_

@prateeksonar6425 4 ай бұрын

Cant we user rtk queries for cache management inside this ssr

@MonsterlessonsAcademy 4 ай бұрын

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

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

@abhijitpatra370 10 ай бұрын

Please use VS code for thr front-end IDE.

@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. kzfaq.info/get/bejne/fdBgjbKjlbSac58.html

@ismailkaracakaya260 10 ай бұрын

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 10 ай бұрын

Sure. It is just a basic example.

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

@joja2174 Жыл бұрын

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

@MonsterlessonsAcademy Жыл бұрын

Glad you liked it!

@SixtyNeptune 5 ай бұрын

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 5 ай бұрын

No idea