Stencil Prerender

I've been trying to get the hydrate bundle working and have a few issues:

1. Assets are not loading
2. The components flash on initial load

I'm wondering if I'm doing something wrong, or if you have any suggestions to fix the above issues. The prerendering happens in server.js

Repro Steps

1. Run:

   git clone git@github.com:benelan/stencil-prerender.git
   cd stencil-prerender
   npm i
   npm run dev

2. Open the app in the browser
3. Click on the big blue "Calcite" link
4. Notice that components flash when they load and that there is a banana icon next to the header. The components flashing when dynamically importing on the client side makes sense, so that's not an issue
5. Shutdown the dev server
6. run npm run server
7. Open the app in the browser
8. Click on the big blue "Calcite" link
9. Notice that the components flash on initial load and there is no banana icon. You can see the flash if you refresh the /calcite route as well. However, if you click back and forth between the "Home" and "Calcite" blue links it works great after the initial load.

It seems like prerendering and hydrating the components should prevent this flash. Maybe the hydration is causing a React VDOM diff and a rerender? Do you have any working examples for using the hydrate bundle that I can use as reference?

---

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.