Static and Server Rendered HTML has no content #11680

avin-kavish · 2020-04-05T09:28:52Z

avin-kavish
Apr 5, 2020

As the title says, this is the html I get. It has no content in it, just script tags. Anything I could be doing wrong?

<!DOCTYPE html>
<html>
<head>
  <meta charSet="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <meta name="next-head-count" content="2" />
  <link rel="preload" href="/_next/static/hyqrwnOVVIXAj2Rp5EaPh/pages/index.js" as="script" />
  <link rel="preload" href="/_next/static/hyqrwnOVVIXAj2Rp5EaPh/pages/_app.js" as="script" />
  <link rel="preload" href="/_next/static/runtime/webpack-b65cab0b00afd201cbda.js" as="script" />
  <link rel="preload" href="/_next/static/chunks/framework.01fb8c9091ebbaaf6515.js" as="script" />
  <link
    rel="preload"
    href="/_next/static/chunks/e39f06d1e03ab2965b214d6f36dc4768b08c38d6.1e4eaf0022bc1b80ca55.js"
    as="script"
  />
  <link
    rel="preload"
    href="/_next/static/chunks/902f088ac54df1b6c1f24b9753fd2df56b46c604.0a3e12d8ae9e525fe73d.js"
    as="script"
  />
  <link
    rel="preload"
    href="/_next/static/chunks/09157d1d80318d466349dc5f29404d4a7a1e44a2.1936b14f1cfe8eddd2a3.js"
    as="script"
  />
  <link
    rel="preload"
    href="/_next/static/chunks/f296d95c5a77fa09ce45ea5285bd723f0f6e5569.0762fd42a872c84034af.js"
    as="script"
  />
  <link
    rel="preload"
    href="/_next/static/chunks/06aad8b037831d438d2ea4039950de5d7a8b2573.8f2c8ce3965d8eaa7007.js"
    as="script"
  />
  <link rel="preload" href="/_next/static/runtime/main-103ccbfe0f67d1d43118.js" as="script" />
  <link
    rel="preload"
    href="/_next/static/chunks/77598ca883855eca5402d2868f06979f0399f44a.f762a188550ba0d9a710.js"
    as="script"
  />
  <link
    rel="preload"
    href="/_next/static/chunks/911c1c0efd8ddc6f22ce2e7940798e3e5bfa67a2.3d186d3f72b53016ff27.js"
    as="script"
  />
  <link
    rel="preload"
    href="/_next/static/chunks/c70d788f797f6a758743528223d95261d03f1d8c.48181f811383aa0d8242.js"
    as="script"
  />
  <link
    rel="preload"
    href="/_next/static/chunks/a8724028d4a70a0f48130e71b18c14989b37a4f5.34f11b2095d2f43812b1.js"
    as="script"
  />
</head>
<body>
<div id="__next"></div>
<script id="__NEXT_DATA__" type="application/json">{
  "props": {
    "pageProps": {}
  },
  "page": "/",
  "query": {},
  "buildId": "hyqrwnOVVIXAj2Rp5EaPh",
  "nextExport": true,
  "autoExport": true,
  "isFallback": false
}</script>
<script nomodule="" src="/_next/static/runtime/polyfills-e48ef734bad80704fcd0.js"></script>
<script
  async=""
  data-next-page="/"
  src="/_next/static/hyqrwnOVVIXAj2Rp5EaPh/pages/index.js"
></script>
<script
  async=""
  data-next-page="/_app"
  src="/_next/static/hyqrwnOVVIXAj2Rp5EaPh/pages/_app.js"
></script>
<script src="/_next/static/runtime/webpack-b65cab0b00afd201cbda.js" async=""></script>
<script src="/_next/static/chunks/framework.01fb8c9091ebbaaf6515.js" async=""></script>
<script
  src="/_next/static/chunks/e39f06d1e03ab2965b214d6f36dc4768b08c38d6.1e4eaf0022bc1b80ca55.js"
  async=""
></script>
<script
  src="/_next/static/chunks/902f088ac54df1b6c1f24b9753fd2df56b46c604.0a3e12d8ae9e525fe73d.js"
  async=""
></script>
<script
  src="/_next/static/chunks/09157d1d80318d466349dc5f29404d4a7a1e44a2.1936b14f1cfe8eddd2a3.js"
  async=""
></script>
<script
  src="/_next/static/chunks/f296d95c5a77fa09ce45ea5285bd723f0f6e5569.0762fd42a872c84034af.js"
  async=""
></script>
<script
  src="/_next/static/chunks/06aad8b037831d438d2ea4039950de5d7a8b2573.8f2c8ce3965d8eaa7007.js"
  async=""
></script>
<script src="/_next/static/runtime/main-103ccbfe0f67d1d43118.js" async=""></script>
<script
  src="/_next/static/chunks/77598ca883855eca5402d2868f06979f0399f44a.f762a188550ba0d9a710.js"
  async=""
></script>
<script
  src="/_next/static/chunks/911c1c0efd8ddc6f22ce2e7940798e3e5bfa67a2.3d186d3f72b53016ff27.js"
  async=""
></script>
<script
  src="/_next/static/chunks/c70d788f797f6a758743528223d95261d03f1d8c.48181f811383aa0d8242.js"
  async=""
></script>
<script
  src="/_next/static/chunks/a8724028d4a70a0f48130e71b18c14989b37a4f5.34f11b2095d2f43812b1.js"
  async=""
></script>
<script src="/_next/static/hyqrwnOVVIXAj2Rp5EaPh/_buildManifest.js" async=""></script>
<script src="/_next/static/hyqrwnOVVIXAj2Rp5EaPh/_ssgManifest.js" async=""></script>
</body>
</html>

Answered by avin-kavish

Apr 6, 2020

Hmm.. now that I look at it, maybe it's the PersistGate preventing the render....

import 'reflect-metadata'
import Head from 'next/head'
import { Anchor, Box, Footer, Grommet, Header, Heading, Nav, ThemeType } from 'grommet'
import React from 'react'
import store, { persistor, RootState } from '../state/store'
import { Provider, useDispatch, useSelector } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { CartModal } from '../components/ShoppingCart'
import Link from 'next/link'
import { Basket, Dashboard, Home, List, Organization } from 'grommet-icons'
import { openCart } from '../state/actions'
import { useRouter } from 'next/router'

export default …

View full answer

timneutkens · 2020-04-06T09:08:16Z

timneutkens
Apr 6, 2020
Maintainer

Sounds like you're rendering null in your application (inside the pages directory).

0 replies

avin-kavish · 2020-04-06T10:26:59Z

avin-kavish
Apr 6, 2020
Author

Definitely not explicitly. Could a run time exception cause the output to silently be null?

1 reply

timneutkens Apr 6, 2020
Maintainer

Not in general, can you post your code?

avin-kavish · 2020-04-06T13:11:59Z

avin-kavish
Apr 6, 2020
Author

This is the home page, there's also a custom _app, if you wanna see it.

import React, { useState } from 'react'
import { Box, Grommet, Heading, Image as ImageComponent, Select } from 'grommet'
import useSWR from 'swr'
import Link from 'next/link'
import { fetcher } from '../api/graphql'


function Home() {
  const [ location, setLocation ] = useState(null)
  const [ options ] = useState([ ... ])

  return (
    <>
        <Box
          height="100%"
          align="center"
          justify={location ? undefined : 'center'}
        >
          <Heading size="large">Delivery</Heading>
          <Select
            placeholder="Enter your location"
            options={options}
            value={location}
            onChange={({ option }) => setLocation(option)}
            onSearch={() => void 0}
          />
          {!location && <Box height="medium" />}
          {location && <ShopList location={location} />}
        </Box>
    </>
  )
}

export default Home

1 reply

timneutkens Apr 6, 2020
Maintainer

Yeah can you provide the _app too?

avin-kavish · 2020-04-06T15:06:00Z

avin-kavish
Apr 6, 2020
Author

Hmm.. now that I look at it, maybe it's the PersistGate preventing the render....

import 'reflect-metadata'
import Head from 'next/head'
import { Anchor, Box, Footer, Grommet, Header, Heading, Nav, ThemeType } from 'grommet'
import React from 'react'
import store, { persistor, RootState } from '../state/store'
import { Provider, useDispatch, useSelector } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { CartModal } from '../components/ShoppingCart'
import Link from 'next/link'
import { Basket, Dashboard, Home, List, Organization } from 'grommet-icons'
import { openCart } from '../state/actions'
import { useRouter } from 'next/router'

export default function App({ Component, pageProps }) {
  const { route } = useRouter()
  const TopNav = route.includes('/vendor/dashboard') ? AppVendorDashboardNav : AppNav


  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
          />
          <title>Delivery</title>
        </Head>
        <style jsx global>{`
          body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI','Roboto','Oxygen','Ubuntu', 'Cantarell','Fira Sans','Droid Sans','Helvetica Neue', sans-serif;
          }
        `}</style>
        <Grommet theme={theme} full>
          <Box height="100%">
            <TopNav />
            <CartModal />
            <Box as="main" flex="grow">
              <Component {...pageProps} />
            </Box>
            <Footer>
              <Nav direction="row" pad="medium">
                <Link href="/vendor/login">
                  <Anchor href="/vendor/login" label="Seller Login" />
                </Link>
              </Nav>
            </Footer>
          </Box>
        </Grommet>
      </PersistGate>
    </Provider>
  )
}

5 replies

timneutkens Apr 6, 2020
Maintainer

<PersistGate loading={null} persistor={persistor}> yeah that is definitely the reason.

avin-kavish Apr 6, 2020
Author

Do you know how to get it to work without removing the persist gate?

timneutkens Apr 6, 2020
Maintainer

Not sure, I'm quite sure that component shouldn't be there or is not implemented with pre-rendering in mind (hence the loading prop always being rendered).

avin-kavish Apr 6, 2020
Author

Hmm... if I am to check for pre-rendering myself. I would have to use typeof window === 'undefined' yes?

avin-kavish Apr 6, 2020
Author

I just removed it. I'll solve the need for it in a different way....

Static and Server Rendered HTML has no content #11680

Uh oh!

Uh oh!

avin-kavish Apr 5, 2020

Replies: 4 comments · 7 replies

Uh oh!

timneutkens Apr 6, 2020 Maintainer

Uh oh!

avin-kavish Apr 6, 2020 Author

Uh oh!

timneutkens Apr 6, 2020 Maintainer

Uh oh!

avin-kavish Apr 6, 2020 Author

Uh oh!

timneutkens Apr 6, 2020 Maintainer

Uh oh!

Uh oh!

avin-kavish Apr 6, 2020 Author

Uh oh!

timneutkens Apr 6, 2020 Maintainer

Uh oh!

avin-kavish Apr 6, 2020 Author

Uh oh!

timneutkens Apr 6, 2020 Maintainer

Uh oh!

avin-kavish Apr 6, 2020 Author

Uh oh!

avin-kavish Apr 6, 2020 Author

avin-kavish
Apr 5, 2020

Replies: 4 comments 7 replies

timneutkens
Apr 6, 2020
Maintainer

avin-kavish
Apr 6, 2020
Author

timneutkens Apr 6, 2020
Maintainer

avin-kavish
Apr 6, 2020
Author

timneutkens Apr 6, 2020
Maintainer

avin-kavish
Apr 6, 2020
Author

timneutkens Apr 6, 2020
Maintainer

avin-kavish Apr 6, 2020
Author

timneutkens Apr 6, 2020
Maintainer

avin-kavish Apr 6, 2020
Author

avin-kavish Apr 6, 2020
Author