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
11
votes
1 answer

Sveltekit and SSR

I need a bit of help understanding SSR in the context of sveltekit. I noticed that the load method is called both on the server and the client and I cannot wrap my head around this. I guess it is needed to initialize the state of the client-side…
jpfollenius
  • 16,456
  • 10
  • 90
  • 156
11
votes
1 answer

How to speed up getServerSideProps with next js?

When I'm using getServerSideProps with next js and it almost takes 5 or 6 seconds for the page to load . I tried using only one url to fetch and not many but again it takes alot for the page to load . export const getServerSideProps = async (ctx) =>…
user12653085
11
votes
5 answers

How to fix `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js

When I try to use react-beautiful-dnd with next.js (or in general with server side rendering), after reorder items and refresh the page I get this error: react-dom.development.js:88 Warning: Prop `data-rbd-draggable-context-id` did not match.…
dna
  • 2,097
  • 1
  • 11
  • 35
11
votes
1 answer

DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL

In react app getting below error when opening cached version of webpage on google. DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://projecturl' cannot be created in a document with origin…
11
votes
3 answers

How do you use routes from a headless CMS in Nuxt JS (SSR)?

The Question I'm trying to use the routes, as defined by the CMS, to fetch content, which is used to determine which Page to load in my our Nuxt frontend. So, how do you implement your own logic for connecting routes to content, and content to…
11
votes
4 answers

Angular 9 Universal ReferenceError: window is not defined

I'm trying to setup SSR on angular 9 project with some third party librairies without success. Below the error ReferenceError: window is not defined at ./node_modules/intl-tel-input/build/js/intlTelInput.js (main.js:295050:32) at…
Franky
  • 902
  • 2
  • 11
  • 28
11
votes
1 answer

When and how are React lifecycle methods called in the NextJS SSR process?

This is a simple question that almost certainly is answered in the NextJS documentation somewhere, but after looking (as well as googling for some writeup about it) I can't find it. As I understand it, NextJS works thusly: If you arrive at your app…
Cerulean
  • 5,543
  • 9
  • 59
  • 111
11
votes
4 answers

Differences of 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs'

I write a simple Nuxtjs project. Based on what I learned from Nuxtjs documents and my experience while testing it, I could not understand the difference between 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs' For example in the following page: //…
MadrinX
  • 193
  • 1
  • 8
11
votes
2 answers

"[NetworkError]" in Angular SSR console with no additional information

The problem: [NetworkError] in Angular SSR console with no additional information. image of console output Note: it does not seem to break the code Environment information: Angular 8.1 SSR is served with NGINX, running in docker container. Http…
Rokas Rudgalvis
  • 306
  • 2
  • 11
11
votes
3 answers

How to implement SSR for single vue component inside of laravel application?

I'm working on an laravel project. There're a lot of vue components and I need to make SSR due to SEO. I can't use nuxt.js or something like it because of my app is not SPA. I have default mix settings: const mix =…
Alexxosipov
  • 1,215
  • 4
  • 19
  • 45
11
votes
1 answer

Gatsby react-helmet not server-side rendering

I'm trying to load my react-helmet tags server-side so that these are injected into the static html file at build time. This would allow things like Facebook to take the source file directly and use the appropriate meta-tags. After configuring my…
Appa
  • 457
  • 6
  • 13
11
votes
2 answers

React/nextJS: How to debug different nodes of SSR react application?

I'm running a nextJS application, which is running SSR. But as I do get the error: Warning: Did not expect server HTML to contain a
in
. So there seems to be a difference between the server-side and the client side nodes. How can I find…
user3142695
  • 15,844
  • 47
  • 176
  • 332
11
votes
2 answers

Angular 5 Universal wait for http request to return during server-side render

I have an Angular 5 app that is served using ngExpressEngine (Followed the Angular Universal starter project). My app has a component that makes a HTTP request to to get some data to be displayed. All works correctly but when I use fetch as google…
11
votes
5 answers

Server does not wait till http call completes before rendering - angular 4 server side rendering

I have gone ahead and implemented angular universal and able to render static part of html via server side rendering. Issue that I face is, API calls are being made and server is rendering the html without waiting for the http call to complete. So,…
Chan15
  • 929
  • 2
  • 9
  • 16
11
votes
2 answers

VueJs: Error with server side rendering and Typescript

I am trying to build a stack using Server Side Rendering (SSR) and Typescript. Everything seems fine but I got the error: TypeError: Cannot read property 'render' of undefined. Here is the full stack trace: TypeError: Cannot read property 'render'…
Shoun
  • 181
  • 10