SSR causes a flicker while hydrating.

[abhishekdgeek]

Hi Team,

Not sure if this was covered in SSR's scope during development, I can see a flicker in page when on slow network.

HTML gets loaded and I get a page.
JS is being loaded and white screen appears.
JS is loaded and view is painted.

Problem:

1. Scroll position not maintained.
2. White flicker for the chunk loading time.

Please refer to following video/gif - https://photos.app.goo.gl/KnH4WnemFo2TTiZW6

[marvinhagemeister]

Do you have a repo or a codesandbox where the issue is reproducible? We did consider this a lot during development and that's how our specialized hydrate() function came to be. It doesn't modifiy the DOM in any way, so there shouldn't be any cases of visible changes at all. Neither flickering or something else. Maybe you're hydrating the SSR'd content with render() instead somewhere?

cc @prateekbh

[marvinhagemeister]

Moving the issue over to the cli repo as according to the video preact-cli is in use and the cause will be very likely there.

[prateekbh]

@marvinhagemeister issue definitely belongs here. But the fix belongs here preactjs/preact#2214

[abhishekdgeek]

@marvinhagemeister this is default code of preact-cli with Lorem Ipsum text. I haven't touched anything else...

I wasn't expecting SSR at all but its enabled in production build with default settings.

import { h } from 'preact';
import style from './style';

const Home = () => (
	<div class={style.home}>
		<h1>Home</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper scelerisque diam sit amet mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam nulla nunc, porta at massa a, dignissim venenatis magna. Sed varius ornare aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ultricies ornare arcu, in bibendum nisl. Nullam eros leo, mollis vel ipsum vitae, sagittis ullamcorper augue.</p>
		<p>Aliquam varius convallis elit, quis porttitor risus. Integer risus purus, blandit quis elit vel, dictum tristique nisl. Nulla id sagittis tellus. In eu diam vel libero vehicula sodales. Sed eget purus diam. Sed vel varius dolor, in laoreet nulla. Cras id interdum ex. Nam orci nisl, dictum id euismod ac, gravida in dui. Nulla eu malesuada felis.</p>
		<p>Sed non lorem congue, tincidunt lorem ut, condimentum urna. Morbi lacinia risus id mauris placerat consectetur. Nam lectus leo, scelerisque vehicula nulla a, convallis pellentesque quam. Maecenas gravida sem non lectus iaculis suscipit non quis mi. Nulla consequat gravida faucibus. Maecenas mauris quam, tempus ac tempor at, fermentum a justo. Aliquam erat volutpat.</p>
		<p>Vestibulum vitae ultrices turpis. Quisque quis nisi ullamcorper, laoreet justo ut, aliquam mauris. Donec sit amet ligula pellentesque, ornare justo in, aliquet tortor. Ut sed pretium orci. Curabitur laoreet orci vitae libero euismod, eget tristique mauris commodo. Mauris accumsan cursus augue blandit vulputate. Morbi et pretium leo. Duis congue nibh et risus laoreet interdum. Nulla vitae tempor purus. Nunc vitae purus leo. In finibus leo tempor leo sodales, imperdiet hendrerit arcu pretium. Mauris diam libero, viverra ac enim at, dictum semper lectus. Ut tortor turpis, elementum ut mauris vel, malesuada luctus nisl.</p>
		<p>Vivamus consequat ex nunc, id dictum turpis venenatis eu. Suspendisse vehicula mauris ut sollicitudin mattis. In placerat eu elit vitae bibendum. Aliquam lacus felis, vulputate vitae pulvinar sit amet, euismod at dolor. Aenean porta diam at nunc ornare pharetra. Integer tincidunt hendrerit euismod. Aenean dapibus accumsan lacus porttitor rutrum. Integer nec lorem purus. Suspendisse pharetra, tortor id malesuada ultrices, nibh erat faucibus nunc, quis maximus nisi lorem id erat. Phasellus iaculis ultricies risus vitae malesuada. Nunc gravida viverra tellus, et gravida neque accumsan vel. Donec et mauris id metus egestas pretium nec a felis. Ut ac efficitur leo. Vivamus convallis purus orci, eget egestas dolor pharetra sed. Donec tristique sed dui malesuada efficitur.</p>
	</div>
);

export default Home;

[prateekbh]

@abhishekdgeek yes. This is the last known issue before we go stable with v3

[abhishekdgeek]

One more question, the SSR will only for homepage?
Example - https://cli-demo-next.preactjs.com/profile will show you homepage and not the SSR for profile page. Seems likely to be a bug or out of scope.

I tried doing it locally.

src/prerender-urls.json

[
	{
		"url": "/",
		"title": "Homepage"
	},
	{
		"url": "/profile",
		"title": "My Profile"
	},
	{
		"url": "/profile/john",
		"title": "John"
	}
]

preact preact build --prerenderUrls src/prerender-urls.json
Build [=================== ] 95% (0.9s) emitting
  Total precache size is about 148 kB for 16 resources.

I am getting inside body tag. Refer to output below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Profile</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#673ab8">
    <link rel="shortcut icon" href="/favicon.ico">
    <link href="/style.b9a15.css" rel="stylesheet">
</head>

<body>
    <undefined></undefined>
    <script defer="defer" src="/bundle.72a84.js"></script>
    <script>window.fetch || document.write('<script src="/polyfills.7f43f.js"><\/script>')</script>
</body>

</html>

[prateekbh]

Thus definitely seems like a bug. What version of Preact CLI are you at?

[abhishekdgeek]

PFA the package.json content -

{
  "private": true,
  "name": "preact",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "per-env",
    "start:production": "npm run -s serve",
    "start:development": "npm run -s dev",
    "build": "preact build",
    "serve": "preact build && serve build --single",
    "dev": "preact watch",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "eslint-config-synacor"
  },
  "eslintIgnore": [
    "build/*"
  ],
  "devDependencies": {
    "enzyme": "^3.10.0",
    "enzyme-adapter-preact-pure": "^2.0.0",
    "eslint": "^6.0.1",
    "eslint-config-synacor": "^3.0.4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "jest-preset-preact": "^1.0.0",
    "per-env": "^1.0.2",
    "preact-cli": "^3.0.0-rc.6",
    "preact-render-spy": "^1.2.1",
    "serve": "^11.1.0"
  },
  "dependencies": {
    "preact": "^10.0.1",
    "preact-render-to-string": "^5.1.0",
    "preact-router": "^3.0.0"
  },
  "jest": {
    "preset": "jest-preset-preact",
    "setupFiles": [
      "<rootDir>/tests/__mocks__/browserMocks.js",
      "<rootDir>/tests/__mocks__/setupTests.js"
    ]
  }
}

[abhishekdgeek]

Thus definitely seems like a bug. What version of Preact CLI are you at?

preact-cli 2.2.1

[developit]

Can you paste the output of npm ls --depth 0 | grep preact?

Getting <undefined> in your HTML means you're either ending up with a copy of Preact 8 somewhere, a copy of React somewhere, or you're not exporting your root component. This sometimes happens when folks don't realize preact-cli does the rendering for them, and they try to do something like render(<App />, document.body) (unnecessary in CLI).

If possible, it would be super useful to see a repo with your code in it. Specifically, I'd be looking at the contents of src/index.js (original template here) and src/components/app.js (original template here).

[ForsakenHarmony]

Well, hydration with preact 10 on cli 2 definitely doesn't work properly, prerendering should?