Best way to send Express data to React props
I have a webapp that pulls data from a table in a database through Express. I want to pass that data in to my React components. Currently, my react components are defined in the client. I read that you can use client-side rendering (using an api like axios to fetch data from express) or server-side rendering (where you fetch the data for the components during the initial page request and send back an html file with pre-filled data). I think I want to go with SSR, since I read it's better for SEO, but now I'm confused because I have my components defined in the client, and I can't import them to the server side since they're different environments. Should I redefine all my components in the server side and fully lean into SSR? I'm new to all of this so I don't even know if my approach is the best, I'd love some pointers. Thanks a lot and let me know if you need me to explain anything!
19 Replies
SSR react?
NextJS or what do you mean by SSR react
With React, I read that you can do it with ReactDOMServer, but I'm not opposed to learning Next.js, but I'm not sure if it's overkill to add another library when the project isn't terribly complex
Basically it's a webapp where people can join lobbies and listen to music in a synced state
oooooooh ReactDOMServer I forgot that was a thing
Yea I didn't know it existed either, but I don't ever use libraries š
ok so yeah, if you're going SSR then go full SSR
Okay cool! So how would I define my components in the server environment, if you know off the top of your head? Would it just be like in client-side inside of a .js file and then you just export it with
module.exports instead of export defaultno you can still use export default
Maksim Ivanov
YouTube
React Server Side Rendering Introduction For Beginners - ReactJS ss...
Learn how to setup basic server side rendering using ReactJS and Express.
Follow me on Odysee: https://odysee.com/$/invite/@stepbystep.dev:9
React SSR (Server Side Rendering) is a technique when you pre-render initial state of your application on backend.
It can greatly improve user experience if used correctly.
š¦ Twitter: https://twitter.c...
here's a not so outdated tut
Haha, I actually watched that tutorial last night in bed, let me rewatch it and I'll post here if I have any other questions (or google it š )
yeah and if you have questions about the specific methods checkout the react docs, they're pretty nice
Right, for some reason forgot that was valid in Node.js as well
ReactDOMServer APIs
A JavaScript library for building user interfaces
the beta docs in particular
tho they're still not 100% complete
Thanks for all your help! Do you recommend me to use Next.js? I haven't looked into it yet, but I'm using this as more of a portfolio piece, so I don't want to add a bajillion different libraries unless there's an articulatable reason
https://reactjs.org/docs/react-dom-server.html
NextJS is nice, and it does add a lot of useful functionality both for working with React and working with your Server
additionally it does give you the ability to use SSR and SSG in different pages very easily
since it is server side logic the additional libraries are not that big of a deal cause the end user doesn't ever see those
but doing it more manually with an express server and ReactDomServer gives you more opportunities to learn new things, NextJs abstracts a lot of that logic for you so wouldn't learn nearly as much
up to you honestly
Yea that's what I'm worried about tbh. Maybe I'll do it first with ReactDOMServer and then refactor it with Next.js. That also gives me a story I can talk about in an interview
Thanks again, you've been a big help š
no prob
React ughh