Stack Overflow
Stack Overflow

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
20
votes
4 answers

Using React.Context with Nextjs13 server-side components

Next13 was released a week ago, and I am trying to migrate a next12 app to a next13. I want to use server-side components as much as possible, but I can't seem to use import { createContext } from 'react'; in any server component. I am getting this…
Tomer Almog
  • 3,604
  • 3
  • 30
  • 36
20
votes
1 answer

Svelte/Sapper.js - How to initialize store with localStorage data?

I come from a React background, but I'm switching to Svelte and Sapper for my next application in order to fight the massive bundle size that comes with React these days. However, I'm having trouble initializing Svelte's store with data retrieved…
another_one
  • 203
  • 2
  • 6
20
votes
5 answers

Warning Prop `href` did not match. using react server-side-rendering

I am using react-router-dom and I am guessing that this is causing the problem, but I have no clue where to even start looking or how to fix it. I also am getting errors like Warning: Did not expect server HTML to contain a
19
votes
3 answers

SvelteKit: disable SSR

I made an app in Svelte and now I wanted to port it to SvelteKit. My app uses window and document objects, but those aren't available in SSR. Firstly, it threw ReferenceError: window is not defined, but I fixed that by checking if the app is running…
Libertas
  • 358
  • 2
  • 5
  • 11
19
votes
3 answers

How to run Next Js application build (out) directory?

I have done development of Next Js application and as of now I have done auto deployment using vercel Things are fine as of now.. But here came the requirement that I need to build the Next Js application and share the build folder with the team for…
Undefined
  • 851
  • 5
  • 20
  • 48
19
votes
3 answers

Preload custom font with Next.js

Greetings Stack Overflow community! I'm using some custom fonts in my Next.js project using the following CSS: @font-face { font-family: OpenSans; font-display: swap; src: url(./OpenSans-Regular.woff2) format('woff2'); } The thing is that…
Daniel Ramos
  • 2,115
  • 3
  • 18
  • 28
19
votes
6 answers

How can I turn off SSR for only certain pages in Nuxt.js to use them as SPA application?

I want to develop an application with Nuxt.js that uses SSR for only certain pages (like artist page user page), so the pages without SSR will be used like an SPA. Is it possible to do it using Nuxt.js?
piemekanika
  • 375
  • 2
  • 5
  • 14
19
votes
2 answers

MJML - Template Interpolation, Dynamic Data, Context

After a lot of searches, I am having difficulties in finding how: MJML handles dynamic data and template interpolations I was expecting something like: import { mjml2html } from 'mjml'; const context = { message: 'Hello World' }; const view =…
Hitmands
  • 13,491
  • 4
  • 34
  • 69
18
votes
2 answers

React/Next.js doesn't seem to work with Apexcharts

Problem My Next.js/React/Node app crashes when I import Chart from "react-apexcharts" in any file. Attempting to visit the app results in the following error: Server ErrorReferenceError: window is not definedThis error happened while generating the…
George
  • 521
  • 1
  • 7
  • 17
18
votes
8 answers

React + NextJS - Protected routes

Objective : I want to redirect a logged in user to the home page if he/she tries to manually go to the /auth/signin. Signin page/component : const Signin = ({ currentUser }) => { const [email, setEmail] = useState(''); const [password,…
Karan Kumar
  • 2,678
  • 5
  • 29
  • 65
18
votes
2 answers

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"

I got this error, although there is not a single line in the project with :first-child, why does it…
Стас Рябцев
  • 1,318
  • 4
  • 19
  • 36
18
votes
2 answers

Server-side rendering + responsive design + inline styles -> which breakpoint to use?

I have a responsive web application built with ReactJS for which I want one day to support server-side rendering. According to the viewport size, the application layout/behavior changes. But all these changes can not only be done with plain CSS…
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
17
votes
17 answers

Hot module reload is not working on my nextjs app

I have a project based on nextjs. Oddly enough, the HMR is not working properly for my project. Every time I make changes I have to re run the process. I have attached details of my next config and package.json: next.config: const withSass =…
Pranay Tripathi
  • 1,614
  • 1
  • 16
  • 24
17
votes
1 answer

How to fetch data in HOC from server in Next.js?

I created new app with Next.js 9.3.1. In old app with SSR, I can use getInitialProps function in HOC components (not in the page), so I can fetch data from server in the HOC component and from page. Like this…
Duy Hưng Androgyne Tenor
  • 381
  • 3
  • 12
17
votes
5 answers

'ReferenceError: Headers is not defined' when using Headers in a server side rendered react project

I'm setting up a new application in React and I want it to be server side rendered. Unfortunately I'm not able to use Headers since it keeps throwing the error 'ReferenceError: Headers is not defined'. I've already tried to add Headers by…
Chantal
  • 959
  • 2
  • 12
  • 24
1 2
3
…
99 100