Introduction
When we develop React apps, it is one of the best choices to separate a server and a client.
But in those cases, we must i...
For further actions, you may consider blocking this person and/or reporting abuse
I admire the post thanks for sharing!
On the subject, I have a framework agnostic alternative this should work with just about anything. send in a headless browser like chrome headless (puppeteer) to render the requested page, toString the output and send that as the response. In other words a much faster browser with no UI does the heavy lifting ahead of time and does cache for the next visitor which is even faster.
Oh, thank you for your sharing that!
The idea of intermediate puppeteer server is awesome :)
If you are OK, please let me know your framework!
Just download puppeteer to get started with headless chrome controlled by JavaScript. Then no matter what framework, given I use express, on route, point the browser here, get the rendered page as a string, store as a variable then serve that string. Not much else to it.
Like I say, no framework required just puppeteer and any http server.
Thank you letting me know!
It may be similar to react-native-dom, right? (If wrong, I'm sorry.)
I will try puppeteer later :)
Potentially? I am not a react specialist. Puppeteer is fantasticly useful, I have used it within a unit testing framework to create acceptance tests.
Does it rehydrate the JS on the client side?
Thank you for your comment!
It hydrates
id="react-ssr-root"once :)I am interested in finding out what you mean by this? I am fairly new to development seeking out as much information as possible and this commend interested me since it seems like it pertains to performance.
So when you render javascript on the server, it just sends the markup and content to the browser. Rehydration means that the client side javascript "comes to life" and can function, rather than being static as was sent. It's not really related to performance, as far as I'm aware.
Thank you for your explanation!
In this point,
react-ssrrehydrates DOM so we can use full React features like hooks :)I'm interested in the meaning of
rehydrate, too.Anyway,
react-ssrhydrates a DOM target once :)What you made is pretty cool. I just spent the last few hours playing with it, but I think you need to point out in your documentation that this does not support client-side routing. This may be obvious to some people, but it wasn't for me. I won't say it was a waste of time because overall I like what you built, but I feel like when we come across a tool named
react-ssrwe're going to assume that it's not purely server-side rendering unless otherwise noted.Thank you for your comment!
I totally agree with what you pointed out. I'll improve README until next minor release :)
If you have any troubles, feel free to open issues like this comment!
Hey, thanks for sharing!
You said it can replace NextJS, so what about client side routing ? Do you need to add smth like react-router/reach-router and then bind on the same routes you already declared in Express?
Thank you for pointing it out!
It may be too much to say
alternative, because I don't think it can replace all roles of NEXT.js.But it may be or can be a choice to use
react-ssrfor small projects.This project aims to make the new way to use React, as a view template engine. It renders views and passes server data to the client like ejs or handlebars, so we should not use this library if we have to use client side routing so many.
I think the practical usage is one of the blows:
Another option for backend is tsed.io/
Cool stuff, Shiono!
For some reason it looks familiar as it seems close to ASP.NET, where React is being used in place of Razor. Would such an association be an accident? 😉
I'm a .NET developer too, so I know Razor but I made a similar project accidentally :)
For React, server side rendering is mainly for Node.js. I think Razor made a big thing to use SSR React applications with not Node.js. I admire.
You've created something fun "accidentally" in a good way :)
This is so cool! thank you for sharing and great project 🦄
Thank you very much, Saurabh!
I just published
v0.19.0and added @react-ssr/static which can generate static files.If you like, feel free to send me feedbacks :)
🙌🏾🙌🏾🙌🏾. You're a life saver. Been looking for something like this, almost gave to start something similar on my own.
What a great article covering an amazing new technology. I am going to give this a try today!
Thank you very much, Macro!
Please check out this "good old way" server rendered view technology :)
Bro I have seen your nextron project and it is dope, can you tell me how you make a cli tool, create-nextron-app .