Menu
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...
489
Universal Rendering. The react-sketchapp components have been architected to provide the same metaphors, layout system & interfaces as react-native, so there is less switching cost between platforms. However, it is also possible to render the same code across multiple platforms. We call this Universal Rendering.
How to Enable Server-Side Rendering for a React App Prerequisites. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local... Step 1 — Creating the React App and Modifying the App Component. First, we use npx to start up a new React app using the... Step 2 ...
Rendering Elements. Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen: const element = <h1>Hello, world</h1>; Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. Note:
It calls ReactDOM.render () every second from a setInterval () callback. In practice, most React apps only call ReactDOM.render () once. In the next sections we will learn how such code gets encapsulated into stateful components.
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.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
