Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Universal rendering for react app based on create-react-app

Tags:

webpack

reactjs

isomorphic-javascript

universal

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...

like image 489
Gai Avatar asked Aug 08 '16 08:08

Gai

People also ask

What is universal rendering in React Native?

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?

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 ...

What is an element in react rendering?

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:

How often does reactdom render in react?

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.

1 Answers

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.

like image 90
Dan Abramov Avatar answered Sep 21 '22 16:09

Dan Abramov
Sign in to Comment

Related questions

How to assign a class to an element if variable == something in React?
React.js app.js file size
ReactJS: text-align justify not working
Prism.js html examples in React
TouchableWithoutFeedback with custom component inside doesn't fires onPress callback
TypeError: this.props.data.map is not a function, but data is a list
On React Flux, where I am supposed to populate the initial state of my Stores?
Too much recursion when updating state in react
Error on exporting React Components in index.js file
Reducing an entire subtree with redux combineReducers
Testing a React Modal component
React JSX style guide
Platform conditional statements in stylesheets (react-native)
What exactly is a "Prop" in React?
ReactJS export const and component from one module
unable set a default value in redux-form w. react
React.js Error "Adjacent JSX elements must be wrapped in an enclosing tag"
Is there a way to pass down props to a component implicitly?
How do you call a jQuery function on a ReactJS element from .jsx script?
TypeError: Cannot read property 'map' of undefined in react-redux

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!