Questions tagged [server-side-rendering]

Serverside rendering is a technique for rendering a client-side app on the server.

Rendering a client application on the server results in a faster experience for end users since they do not have to wait for assets to load before they can see and interact with an app. This is accomplished by using isomorphic code: code which is used on both the server and the client.

4406 questions
9
votes
1 answer

React universal redux-saga memory leak

I am working on a React isomorphic app that uses redux and redux-saga. My problem is that the node process that runs the app takes more and more memory as requests get processed, until it eventually runs out of memory. I profiled the app with node…
ovi
  • 566
  • 4
  • 17
9
votes
0 answers

React + SSR + webpack + node, unexpected token �PNG

I'm having webapp in react with server side rendering feature running on node server. I'm using local images from assets directory (as shown below: which is running fine on the…
9
votes
1 answer

Are Images Rendered Client Side or Server Side?

I've just gotten started with web development, particularly Reactjs, which introduces "client side rendering." I think I understand the concept of client vs server side rendering, but I don't exactly know how to understand these concepts…
9
votes
0 answers

Server-side rendering and async routing, blank flash on client side with react@16

When I render a synchronous route on server-side and then the client side hydrate the dom, I get a warning because client side asynchronous route doesn't find the component. In other hand react fiber reconciliation tries to remove this non…
9
votes
2 answers

How to use Angular 2 server side rendering

I have developed a parser for my angular2 components which renders them in my HTML file. So far I am able to render them in HTML as import {Component} from 'angular2/core'; import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from…
Bhushan Gadekar
  • 13,485
  • 21
  • 82
  • 131
8
votes
4 answers

Adding a tag to using Next.js>13.3 with appDir enabled

The documentation for using appDir on Next.js 13.4 states the following: Step 3: Migrating next/head In the pages directory, the next/head React component is used to manage HTML elements such as title and meta. In the app directory, next/head is…
villasv
  • 6,304
  • 2
  • 44
  • 78
8
votes
3 answers

Angular UNIVERSAL prerender error Method Promise.prototype.then called on incompatible receiver [object Object]

I'm having problems rendering my site, in the past it worked fine but i had to reinstall node and angular and it stops working I'm on a m1 macbook pro. Angular: 14.2.7 Node: v16.18.0 ✖ Prerendering routes to…
8
votes
2 answers

NEXTJS Amplify slow server response

I've a SSR App Nextjs 12 installed on AWS Amplify that's too slow. Logging the getServerSideProps() this is the result: It takes 9 seconds to load page but the code inside getServerSideProps takes less than 0.5 second. This is the server log: START…
8
votes
1 answer

How does stale-while-revalidate interact with s-maxage in Cache-Control header?

Just want to know around the header that I have specified for my SSR pages: public, s-maxage=3600, stale-while-revalidate=59. Please note that my stale-while-revalidate value is 59 seconds which is way less than s-maxage value which is 1 hour. I…
Gauri Padbidri
  • 371
  • 4
  • 15
8
votes
2 answers

Compile a JSX string to a component on the fly

I've got a React application, in which I need to display an HTML Popup with some dynamic content generated by the server. This content also contains some JSX markup which I want to be rendered into real components.
gog
  • 10,367
  • 2
  • 24
  • 38
8
votes
2 answers

Angular - Server side - Initial response time is very high

My site - https://sandbox.billionlearners.com => It is on Angular 12 SSR (running on node) Total time taken to render the page is @6secs but initial server side page take @4secs (which has size less than 200Kb) command line dig time…
user2869612
  • 607
  • 2
  • 10
  • 32
8
votes
0 answers

react-pdf cannot use import statement outside a module

I'm using react-pdf to render PDFs in React via CRA, and I import it like this: import { Document, Page } from "react-pdf/dist/esm/entry.webpack"; Now, I'm trying to implement SSR with this webpack config: // webpack.server.conf const path =…
Max Filippov
  • 2,024
  • 18
  • 37
8
votes
6 answers

How to remove __NEXT_DATA__ from dom in NextJs?

Because of NEXT_DATA element dom size is getting very high and it is affecting to the performance. Can anyone plz help me to remove NEXT_DATA from dom? I am using full server-side rendering with dynamic routes in next Js.
Archana Agivale
  • 317
  • 1
  • 3
  • 14
8
votes
1 answer

How to implement redux-toolkit and next,js and not lose SSR

I'm trying to implement redux-toolkit in my Next.js project without losing the option of SSR for the data I'm fetching from an external API. I have followed the example in next.js GitHub but doing so led to not having SSR when fetching data in my…
8
votes
0 answers

Vercel 504 Bad Gateway Error Page though code works in dev mode

So I have built a Next app based on this NextJS example which means I have GraphQL routes and an Apollo server I use to fetch from the API in the app. The example shows how to fetch in getStaticProps() which works fine for me but I need to implement…