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
This was amazing explanation, thank you, but i want to ask one question, if i want to deploy the react app to cpanel/share hosting, should i put the build folder in public_html folder or in Node js app server?
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??
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.
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
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?
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!
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?
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.
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
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
Really loved how simple it was and so easy to understand
Glad to hear that!
Nice one, I've never tried this approach because I've always used Next JS, but it's great to know this too.
Glad it was helpful!
Great explanation, thanks!
Glad it was helpful!
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
greatly explained
Thank you!
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.
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
This was amazing explanation, thank you, but i want to ask one question, if i want to deploy the react app to cpanel/share hosting, should i put the build folder in public_html folder or in Node js app server?
No idea as I never used cpanel. From client only react you need to serve html as a static. For SSR you need a running node server
Can you provide some information on the deployment part? For example how to serve this ssr app with the help of AWS Lambda function
I will add it to the list of ideas for future videos
Thanks bro 🙏
Welcome
Nice explanantion
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??
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.
Cant we user rtk queries for cache management inside this ssr
On ssr we just build markup and provide initial data that we fetched to the client. So not really.
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
same with me
same with me also please share the solution
@@UsefulClips_
Hello sir, this is a great tutorial!
I want to ask, can it be used for data dynamically or calling from an API?
Yes we can.
@@MonsterlessonsAcademy have you ever used vue ssr? Can vue ssr use data dynamically?
I want to render some components from server or rest will be render in client
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?
got same problem
try changing the order of the two "app.use()" parts, then change the regex "^/$" of the now second one to "*"
Do you have plans to make a video about SSR on Angular? (I mean Angular Universal)
Thank you for the idea. I added it to the list of future videos.
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!
Unable to find the App file getting error "Error: Cannot find module '../src/App' "
SyntaxError: Invalid or unexpected token getting this error dk why?
Is the channel about react now? Clicked so fast thinking its angular content.
I was never intended to be just about Angular. It is anything related to web.
Please use VS code for thr front-end IDE.
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?
Haha 3 months ago and now answer, I got the same issue
@@martapfahl940 Haha 1 months ago and now answer, I got the same issue
can we have lazy loaded pages in this SSR of react app ?
Sure
to load assets we need webpack config?
src/App.tsx:2:18 - error TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
Do you have logo.svg file in the correct place?
@@MonsterlessonsAcademy in the build folder
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
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.
can u pls make a video about react js chart with dropdown option using a API🙏
I already have a video about react charts but without an api. ruclips.net/video/Gj0ZOr0N6Ck/видео.html
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
Sure. It is just a basic example.
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 ?
Thank you. I have lots of plans but not enough time at the moments.
NextJS developers watching this: ☕
seriously i just wanted to know how this is done, great video
Glad you liked it!
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
No idea