score:14
rendertonodestrem() this function returns a readable stream. with this function we still get requests from the browser, we make our initial api requests then we build a tiny snippet of our react application so we attempt to render application. but we just render the bare minimum of it like the first component, the first bit of the html. the instant we get that first little tiny bit of html ready, we send that snippet to the browser. then on the server we put together next tiny little snippet of our html. we then take that tiny snippet and we send it to the browser and then we repeat the same process many times. so with this function we are assembling tiny pieces of our html document and sending them over to the user’s browser.
ttfb: time to first bite this is the number that we really care about when it comes to search engine optimization. it is a duration of how long it took for our server to put together some initial bit of html and send a response back to the browser. it is very widely used by google and other search engines to rate the performance of our page. this is far short in duration with the rendertonodestream() because we are building a tiny bit of html and sending it.
if you start to render your application with nodestream and then you come along a component that needs to redirect, you cannot do redirecting. because once you start piping all that content from the nodestream into the res object, that instantly starts the response and sends it back to the user. imagine users come along with a page that needs to be authorized but it is not, you have to redirect the user with status code change but you cannot change the status code.
if you want to use the rendertonodestream you have to change the entire architecture of the app. instead of next routing, you have to use react-router dom. for react server side, you have to use staticrouter which passes the context prop to all of the components. it is similar to what getinitialprops "context" object. if you are going to use react router dom, then you have to look for all the components and decide what async operations have to be completed before sending the response object. you have to this manually.
technically you cannot use react rendertonodestream with next.js. instead you have to configure webpack, build your own server, most likely express server and implement everything on your own.
next.js is popular because there is alot of work to complete the server-side rendering. however as of now, next.js has no support for rendertonodestream. but it is on the way.
Source: stackoverflow.com
Related Query
- React SSR instead of 'getInitialProps' of 'next.js'
- Import styles bootstrap in Next Js project React SSR
- How can I specify authentication globally instead of defining on every page in Next js, I am using next-auth package with react query
- React joyride - closing tour leads to the next step instead
- Next JS - Handling getInitialProps on _app.js in SSR vs CSR
- Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
- React showing 0 instead of nothing with short-circuit (&&) conditional component
- Functions are not valid as a React child. This may happen if you return a Component instead of from render
- When to use a react framework such as Next or Gatsby vs Create React App
- Cheapest way to deploy a React app using NextJS SSR on AWS?
- How to focus something on next render with React Hooks
- How to upgrade a React project built with create-react-app to the next create-react-app version?
- React require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")
- Expected onClick listener to be a function, instead got type object - react redux
- How to detect the device on React SSR App with Next.js?
- How to detect window size in Next.js SSR using react hook?
- React debug Using VSCode and Firefox instead of Chrome
- Can I use arrow functions instead of normal functions for React Hooks?
- React with JetBrains WebStorm auto import with absolute path instead of relative
- Cons of next.js over create react app + redux + ssr
- Removing an item causes React to remove the last DOM node instead of the one associated with that item
- Disadvantage of using JS based navigation solution like React Navigation instead of using Native Navigation like Wix's React Native Navigation?
- React native Refresh works but next call still uses the last token
- Align next to each other in <View/> react native
- Error while deploying react based SSR app, using firebase-functions
- Sending number instead of string from Select in React component
- React - Deleting from middle of list removes last element instead
- React helmet or next/head for Next Js project?
- useEffect Error: Minified React error #321 (GTM implementation instead of google analitycs)
- How to format time in React SSR rendered page using client time zone?
More Query from same tag
- eslint-plugin-react does not find a rule
- React - Make Child component shrink when parent component shrinks
- render MUI components from an array of data and display the first one differently
- how to make an observable in react with other library
- React.js onClick event not firing
- React-Redux State Shape for multiple pages
- ReactJS - Issues about Dynamic Routes
- How to get Accounts.onLogin to impact my app in Meteor React ES6?
- How todisable keyboard in react-datetime
- How load IcoMoon webfont in React?
- Why shouldn't we use ref?
- Display search results on keypress
- How to save MultiSelect values in MultiStep react form using hooks
- Uncaught Error: useNavigate() may be used only in the context of a <Router> component. - What is it that I am doing wrong?
- Multiple fields appearing under a parent in ReactJs
- Redux - modifying state of a nested array of objects
- How to share image on twitter using react-share in reactjs
- Calling componentDidMount inside a class Component's function
- how to import custom css to reactjs project
- React app won't render info from props even though I can console log it
- Pushing event handlers to parent components
- Why can I assign unknown properties to literal object in typescript?
- Props are undefined in React
- react-stomp-hooks useStompClient hook set to undefined on page refresh
- why does ReactJS suppress changes in <input> elements but not in e.g. <select> elements
- How could I reset the state of my component according to changes in the parent component?
- the difference between those two className in reactjs
- React pass dom node as input to another component
- using Map for an object api
- How to Set the response to a state by using this.setState inside a componentDidMount() method