Server Side Rendering React with Express

Learn how to use server side rendering (SSR) with a custom built React application and Express. The React application is built from scratch with Webpack and has multiple routes with React Router. We will also learn what SSR is and the benefits of SSR.
👩‍💻 Download Code 👨‍💻
wittcode.com
🛜 Download My Chrome Extension 🛜
chromewebstore.google.com/det...
💻 Compare Laptop Specs 💻
laptopspectable.com
🔴 Rare Pokemon Cards ⚪️
rarepokemoncards.com
👻 90s Nostalgia 👻
goosebumpsforsale.com
⌛Timestamps⌛
0:00 - Intro
0:07 - Project Demonstration
1:43 - What is SSR?
2:04 - Why use SSR?
2:23 - Creating a React App From Scratch with Webpack
6:31 - Create Scripts to Run the Application
7:21 - Coding the React App
10:29 - Coding the Express Server
13:51 - Running the Application
14:15 - Checking SSR was Used
16:14 - Outro

[@spuriushs6314]

help me pls, how to use nodemon or something simillar on this project?

[@duypkthg592]

To be honest, I couldn't sleep for 3 days to find this video🤣Thank you for this very helpful🥰

[@DKfolkin]

Awsome, no water, so clear. What do you think about RSC. Can you emplement this feature(RSC) to your codebase?

[@WittCode]

I'm not familiar with RSC but I can give it a look!

[@VishalSharma-ri8mo]

Please tell me how can I handle cookies with ssr data route array?

[@WittCode]

Hey there! What do you mean? How to use cookies with SSR? Cookies shouldnt be impacted by using SSR! They will still be sent with each request if they are set on the client correctly

[@nameismani9318]

can you upload video how to add css files tailwindcss in ssr and how to deploy it in netlify

[@WittCode]

Not familiar with Netlify but definitley sounds like a good topic!

[@andrewdatar9880]

Great setup! Thank you for sharing. Your blog is awesome too. Please fix broken images in articles (pointing to localhost), example - in WebSockets Explained article

[@WittCode]

Hey there thanks! And yeah It's been broken for a while I believe can't believe I have it pointing to localhost lol but I'll fix it!

[@Houseofwebz]

please how does one host/deploy a react app that was built using ssr?

[@WittCode]

Good future video topic!

[@Houseofwebz]

@@WittCode bring it on bro! Patiently waiting

[@noahmilliken4259]

How com you chose to use webpack?

[@WittCode]

I just know the most about webpack haha so I like to use it

[@MishraXE]

server started on port undefined, in server.js const PORT = process.env.PORT not working, I'm doing exactly same as the video

[@WittCode]

sounds like your environment variables aren't being set. How are you running the program?

[@MishraXE]

@@WittCode I debugged my code and found that there was a typo in my code in new webpack.EnvironmentPlugin. And those clean, build, start commands are working fine on windows. But one problem though, that it throughing error if I use a .css file for styling

[@WittCode]

@@MishraXE nice! and as for those CSS files they will need to be added to the webpack configuration so they are imported. Ive never actually done ssr with straight CSS though I use MUI...

[@user-yyyyy877]

hello. Is there a way to run it without building it?

[@WittCode]

You mean without building the react app with webpack?

[@user-yyyyy877]

sorry. I'm using a translator, so my words may sound strange. Can I run SSR using the devServer option in development mode? In other words, I am curious about whether it can be run without bundling (npm run build).@@WittCode

[@WittCode]

no worries@@user-yyyyy877 ! Yeah so I could actually make a video on this. Im pretty sure you can do it using webpack dev server but the way I do it in development is use webpack --watch for JSX files and then have nodemon to check for any changes in the compiled js in the build folder. Lmk if that makes sense. So you basically have two watches. One on the project itself and another on the build folder. There might be a better way to do it but that's what has worked for me!

[@user-yyyyy877]

@@WittCode Thank you so much for your reply! I will also test it as you said.!!! :)

[@romanmed9035]

can i use redux with this rendering?

[@WittCode]

Wouldn't see why you can't!

[@romanmed9035]

@@WittCode I don't understand how it will work in two places at the same time. I suggest making a video on this topic.

[@Mari_Selalu_Berbuat_Kebaikan]

Let's always do alot of good