Anyone have any experience converting a react app created with create-react-app to using server side rendering and code splitting via loadable-components? I know this is a general question, but mostly looking for general guidance or any major red flags for this approach. I'd like to keep the nice things you get out of box with create-react-app - especially the live reload dev environment - while adding in optimizations using SSR and code splitting. I was able to mostly get this working using express backend and handlebars templating, but I'm facing many challenges getting code splitting working correctly with this setup. Any hints / stories are appreciated!
There is craco "an easy and comprehensible configuration layer for create-react-app".
Webpack custom configurations go into craco.config.js, inside root folder.
SSR is possible, you can check two related questions that might help you with your case:
Code splitting loads all chunk files on chrome but load them separately in firefox
Loadable Components SSR - chunkNames in Server Stats file different from Client stats file
Related
I have a huge project using asp.net and jquery. I want to start migrating to react page by page (it might take a lot of time).
I would like to know what is the best practice to do it.
Can I move pages to react partially (for example half of page), and is it good approach?
Lets say I have main page A with with links to page B and C. Can I move page B and C to react, using routing, without moving page A right now?
I think I will use Vite to create and manager react project. In the production vite generates static files so I will simply host new files next to old ones in my backend server.
The problem is with development, because in this mode vite creates new server with functions like hotreload and in the result I have two diffrent servers hosting frontend asp.net and vite.
I would prefer to have just one server also for development. Is it possible to build development version with vite and copy it to server the same way like in production? Is this good approach?
I know that it would be the best to have backend and frontend server separated, but project is so huge that it is not possible in the foreseeable future
I am using React in my project and I have problem with client-side prerendering.
More specifically, it would be necessary to configure SEO
Which is the least painless way to prerender existing reactjs app wiht react-routes
Some examples I have researched:
Gatsby.js - https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/
Next.js - https://nextjs.org/docs#custom-document
Netlify - https://dev.to/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87
React-snap - https://web.dev/prerender-with-react-snap/
Prerender.io - https://prerender.io/
Keen’s Server Side Rendered - https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a
Razzle - https://reactresources.com/topics/razzle
React Helmet - https://github.com/nfl/react-helmet
Can anyone suggest what option I should choose that is the least painless.
I have headless wordpress as backend and reactjs client-side as frontend.
Or are there other faster options besides the prerendering?
Thanks.
IMO you really don't need to use a framework to achieve SSR if you want to keep control without turning your codebase into a blackbox and choose your own stack.
I created some boilerplate using Node Express. It supports:
SSR using StaticRouter on the server and BrowserRouter in the client
ES6 webpack transpilation + hot reloading both client and server and auto-updating browser
Redux, data preloading and client store hydration
https://github.com/kimgysen/isomorphic-react-setup
Last time I ran it, I noticed that I hadn't saved the favIcon in the public folder and perhaps there are some minor bugs that I will fix soon (I've fixed them in my projects but didn't update this repo because nobody looks at it anyway (lol!)), but what happens here isn't all that difficult to understand.
I created some basic SSR websites with it in a matter of hours.
I enjoy redux-observable to initiate server ajax calls before rendering the content (using forkJoin), but this is not included in the boilerplate (I haven't actually supported it since I uploaded the first time).
But in terms of setup, I don't really see a point in using a framework for this necessarily, it really isn't that painful / difficult to do yourself.
The benefit that I particularly like is that you don't depend yourself on the scope and dependencies of the framework. You don't get into trouble with things like 'the framework will support this feature or fix that bug in one of the upcoming releases'.
Although ultimately, it comes down to personal choice. So it's not like I want to downgrade these frameworks.
Note: The way Redux achieves pre-rendering is simply by adding Redux store (state) objects to the window object in the html that is sent back to the client.
Then at the client, the it initializes the stores with these objects.
So very simply, this is something that is easy to achieve, even if you decide not to implement any other SSR features.
to create server side applicantion with painless integration you can use my cli to generate a default configuration like create react app cli from facebook, https://github.com/ghondar/crassa
In an article I read that
React uses server-side rendering.
But in another articles I came across this:
Client-Side-Rendering is a relatively new approach to rendering
websites, and it didn't really become popular until JavaScript
libraries started incorporating it into their style of development.
Some notable examples are Vue.js and React.js
Now Which statement is correct?
When I use create-react-app and run npm start, it seems to me that React uses the Client-Side-Rendering. isn't it?
It’s client side. But React, like some other client side libraries, can be used on the server to prerender it with node, usually for SEO.
Out of the box it renders on the client side.
But, if you have a requirement to render pages on a server, you can achieve this with:
Next.js or
Hypernova or any other tool (there is a bunch of them nowadays!)
Note, that SSR will require a bit more experience than a regular React app.
The main goal of this approach is to allow search engine robots crawl information form web pages(SEO).
create-react-app uses client side rendering by default. There are some tools like next js and gatsby js which pre-render pages on the server side. You can also do Server Side Rendering from scratch.
A few years on from the last answer, it is now quite difficult to implement a client-only React app - serving it on Node is trivial and absolutely what it expects, trying to use it as a client library with other server-side support is more of a challenge and documentation about how to do this is patchy and much of it out of date.
I'm using create-react-app in my latest project and it's great! Now I'm facing one issue that I'm not sure how to solve properly.
I've created app using redux for my state managment, and that all is working well.
Now I don't have much experiance with server side renderin in React, but for my next feature I'll need to take one of the existing / working react components (that are connected to redux store) and render it on server that comes with create-react-app. The reason why I wanna do this is to be able to use some libs like pdf generators and simillar to be able to print out some of them (also some other stuff but that's the basic).
First thing I'm confused with, since I don't want to render everyting on server, what's the best / correct way (for development) to run webpack-dev server and node server that will do all those taks I mentioned above in parallel instead of just changing it's default port to let's say 8000, and run it manually?
Secound, should I be able to just use ReactDOMServer.renderToString on that existing component on server or there is something else that will complicate stuff (I know I'll need to add babel on server definitaly)?
Create React App does not support server rendering. You might want to migrate to Next.js which does.
Unfortunately, Create React App (CRA) doesn't have extensibility points to allow this. But there is a slightly altered version of CRA that allows compiling, testing and running both client-side and server-side code using regular CRA pipeline - npm start will compile and launch both cient-side and server-side portions of your app, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.