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
32
votes
13 answers

Error: How to serialize data from getStaticProps : Next.js

I'm working with Next.js, I tried accessing data but got this error: Error: Error serializing `.profileData` returned from `getStaticProps` in "/profile/[slug]". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this…
32
votes
7 answers

Next.js DOMPurify.sanitize() shows TypeError: dompurify__WEBPACK_IMPORTED_MODULE_6___default.a.sanitize is not a function

I am using DOMPurify.sanitize() inside dangerouslySetInnerHTML={{}} to display innerHtml returned from the database. For initial purpose I'm using getServersideProps() with next-redux-wrapper for this page. I installed dompurify with: npm i -S…
forest
  • 1,312
  • 3
  • 20
  • 47
30
votes
8 answers

Next.js Opt out of Layout Component for specific pages from _app.js

How to not wrap a specific page with Layout component in _app.js? For example, I have two pages as pages/home and pages/about, now how can I not wrap my pages/home page with Layout component? pages/_app.js import "../styles/globals.css"; import…
Shreyas Jadhav
  • 2,363
  • 4
  • 10
  • 23
29
votes
2 answers

How can I manually compile a svelte component down to the final javascript and css that sapper/svelte produces?

Our company produces an automation framework that is written in svelte/sapper. One feature is that developers can create custom ui widgets, currently using plain js/html/css and our client side api. These widgets are stored in the database and not…
mr.freeze
  • 13,731
  • 5
  • 36
  • 42
27
votes
5 answers

Next.js - Shallow routing with dynamic routes

When attempting shallow routing with a dynamic route in Next.js the page is refreshed and shallow ignored. Seems a lot of people are confused about this. Say we start on the following page router.push( '/post/[...slug]', …
AndrewMcLagan
  • 13,459
  • 23
  • 91
  • 158
27
votes
3 answers

Do I have to use express in Next.js project?

I’m making a website via Next.js. Next.js provides SSR and dynamic routing. Do I have to use express? If so, why do I have to use it? What kind of features of express are useful that are not provided from Next.js? I think next build & next start…
Ibra
  • 906
  • 1
  • 7
  • 13
26
votes
2 answers

Managing user's global state on next.js application

I am coming from the world of SPA's and REST/GraphQl API's. Now I am building personal project with Next.js library for SSR(Server Side Rendered) React App. Since I used Redux in all of my single page Apps, I'm now wondering how should I manage user…
24
votes
3 answers

How does SSR go with PWA

How can one do SSR (Server side rendering) with PWA (Progressive web app)? From what I understand, SSR The SSR runtime will load the page and run the necessary scripts to load the data on to the page. Then returns the rendered html. This is…
Amanuel Nega
  • 1,899
  • 1
  • 24
  • 42
23
votes
2 answers

SSR explained in SvelteKit

I recently started working with Svelte via SvelteKit and I have a few questions about this framework to which I haven't been able to find any direct answers in the source/documentation: SvelteKit has SSR and in the documentation it says: All…
22
votes
12 answers

The default export is not a React Component in page: "/" NextJS

Not sure why the error is coming up, heres my index.js and App.js (the default export). I have used export default in the app.js. index.js: import "./index.css"; import App from "./App"; import "bootstrap/dist/css/bootstrap.css"; import…
Keytoll
  • 469
  • 1
  • 5
  • 11
22
votes
4 answers

Custom Directive in nuxt js

is there a way how to write a custom directive in nuxt js, which will work for ssr and also for frontend (or even for ssr only)? I tried it like in following documentation: https://nuxtjs.org/api/configuration-render#bundleRenderer so I added this…
Martin Rázus
  • 4,615
  • 5
  • 30
  • 33
22
votes
3 answers

React.js server side rendering with PHP

I would like to develop themes/plugins for WordPress based on React. To make it search engine friendly, I need it to be rendered initially on the server (serverside-rendering). The only way to do this, as far as I know, is to use react-php-v8js,…
Yoav Kadosh
  • 4,807
  • 4
  • 39
  • 56
21
votes
4 answers

Next.js Unhandled Runtime Error "Failed to load script: /_next/static/chunks/..." only triggered in dev mode

I am running... a next.js app in dev mode. I have a page that maps through JSON data from the backend and renders a component 'EventListItem' for every 'event' object contained. List…
21
votes
5 answers

Flash Of Unstyled Text (FOUT) on reload using next.js and styled components

I'm using global style from styled components with next.js and every time I reload my page I can see the font flickering. I have my font files in public/fonts/Inconsolata I've looked everywhere in spectrum chat, next.js github issues but can't…
m00
  • 297
  • 1
  • 5
  • 13
20
votes
4 answers

Does Redux still makes sense with NextJS 13 App directory?

With the new NextJS 13 introducing the app directory, would redux still make sense? It's already possible to wrap redux providers around a Client Component as per next docs. But how would sharing states with redux impact Next performance and…
Luna
  • 467
  • 1
  • 3
  • 11