React: Software Architecture | Server-side rendering basics | Part 2

Many React developers have intimate knowledge of the React API itself, but little familiarity with how to create real-world apps on a larger scale while dealing with various stakeholders. The heavy demands on web apps both from a customer and managerial perspective require that developers arrange software in an optimal way to ensure performance and maintainability. And in order to do this effectively, programmers must know how to create good software architecture. In this course, senior software developer Shaun Wassell shows you how, detailing what React developers need to know to keep their apps maintainable, performant, and compliant for the long haul. Delve into the basics of server-side rendering, state management, code splitting, and much more.

This video is about the second part of React: Software Architecture, in this video you'll gonna learn about Server-side rendering basics.
Time Stamps:

00:00 Server-Side Rendering Basics
03:30 Setting up a simple React app
08:43 Basic React SSR
15:23 Building and rendering an SSR React app
18:15 Routing with SSR
25:15 Styling with SSR
33:10 SSR Caveats

#redux #react #reactjs #basicreactproject #AdekNinie #CodingWithMrm #codingwithmrm #adekninie #ssr #SSR #serversiderendering #reactdesignpatterns

[SoftwareSimplified-Dtons]

Thanks for the informative video, but facing this problem Can you please help
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at renderElement
at renderNodeDestructiveImpl
at renderNodeDestructive
at retryTask
at performWork
at
at scheduleWork
at startWork
at renderToStringImpl
at renderToString
at
at Layer.handle [as handle_request]
at next
at Route.dispatch
at Layer.handle [as handle_request]
at
at param
at param
at Function.process_params
at next
at SendStream.error
at SendStream.emit (node:events:517:28)
at SendStream.emit (node:domain:489:12)
at SendStream.error
at SendStream.redirect
at SendStream.emit (node:events:517:28)
at SendStream.emit (node:domain:489:12)
at SendStream.redirect
at onstat
at FSReqCallback.oncomplete (node:fs:211:5)

[oleksandrfomin]

Thanks for the in-depths analysis and a great example. This really open your eyes on what NextJs does under the hood. Great stuff!

[HuyNguyen-mybi]

Thanks for the great video!!! ❤❤❤ Can you make a video on how to deploy ReactJs SSR? I'm having trouble with this. Thank you so much

[ShaikShafi-bptz]

please do a video on ssr with react js using webpack and babel. and also add loadable components to it. thank you for this great tutorial.

[zafiroula]

thanks that was such a good introduction to server side rendering and coding along was so fun. can't wait to see what you'll upload next 🔥

[abdannour]

Thank you, but I have a question, does this works in a shared hosting that doesn't support node js

[GulliverStrange]

"Copy the starting state of the exercise files" . Exercise files where? XD

[CharterLin]

Hi Mr. M. So I followed along with your video to build the routes, but I have encountered a problem, Here is the error: Error: 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.' I have figured out that it's the renderToString that cause the problem. Are you able to help me?

[huzaifayaqoob]

Hi
I am working with react-router-dom v6, My Application have a hug structure, I am facing too much errors, un-known error
Could you please help me in this regards

[azazahmedlipu]

You're awesome >
Note : I had no idea that can do ssr in raw react... thus i was thinking switch to nextjs13 hahaha

[windiazmy]

i cant use renderToString, what should i do ?

[xyz-eyul]

nice video. if you can also do a video on how to handle this with firebase functions it would be great. only if you like firebase otherwise this tutorial is still enough

[waleedsharif]

Whats difference between this and nextjs ?

[richardramirez]

I think all of these SSR can be handled by Next.js, getting the same result? Is that right?

[vahesevachyan]

Under rated channel. You got some great content. Keep up the good work.