Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create next.js example for pullstate #20078

Closed
wants to merge 3 commits into from
Closed

Create next.js example for pullstate #20078

wants to merge 3 commits into from

Conversation

xeoneux
Copy link

@xeoneux xeoneux commented Dec 10, 2020

No description provided.

@ijjk ijjk added the examples Issue was opened via the examples template. label Dec 10, 2020
@vercel vercel bot temporarily deployed to Preview December 10, 2020 23:21 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 10, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary xeoneux/next.js canary Change
buildDuration 8.6s 8.6s ⚠️ +21ms
nodeModulesSize 82.5 MB 82.5 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary xeoneux/next.js canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.081 2.058 -0.02
/ avg req/sec 1201.6 1215.06 +13.46
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.077 1.098 ⚠️ +0.02
/error-in-render avg req/sec 2321.3 2277.45 ⚠️ -43.85
Client Bundles (main, webpack, commons)
vercel/next.js canary xeoneux/next.js canary Change
677f882d2ed8..34b9.js gzip 12.8 kB 12.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-3e8cb31..cddc.js gzip 6.56 kB 6.56 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 59 kB 59 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary xeoneux/next.js canary Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary xeoneux/next.js canary Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-01375..90b6.js gzip 3.69 kB 3.69 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB ✓
routerDirect..fd29.js gzip 303 B 303 B ✓
withRouter-b..76ae.js gzip 302 B 302 B ✓
Overall change 8.31 kB 8.31 kB ✓
Client Build Manifests
vercel/next.js canary xeoneux/next.js canary Change
_buildManifest.js gzip 322 B 322 B ✓
Overall change 322 B 322 B ✓
Rendered Page Sizes
vercel/next.js canary xeoneux/next.js canary Change
index.html gzip 614 B 614 B ✓
link.html gzip 620 B 620 B ✓
withRouter.html gzip 608 B 608 B ✓
Overall change 1.84 kB 1.84 kB ✓
Serverless Mode
General
vercel/next.js canary xeoneux/next.js canary Change
buildDuration 10.1s 10.2s ⚠️ +110ms
nodeModulesSize 82.5 MB 82.5 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary xeoneux/next.js canary Change
677f882d2ed8..34b9.js gzip 12.8 kB 12.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-3e8cb31..cddc.js gzip 6.56 kB 6.56 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 59 kB 59 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary xeoneux/next.js canary Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary xeoneux/next.js canary Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-01375..90b6.js gzip 3.69 kB 3.69 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB ✓
routerDirect..fd29.js gzip 303 B 303 B ✓
withRouter-b..76ae.js gzip 302 B 302 B ✓
Overall change 8.31 kB 8.31 kB ✓
Client Build Manifests
vercel/next.js canary xeoneux/next.js canary Change
_buildManifest.js gzip 322 B 322 B ✓
Overall change 322 B 322 B ✓
Serverless bundles
vercel/next.js canary xeoneux/next.js canary Change
_error.js 1 MB 1 MB ✓
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.16 MB 5.16 MB ✓
Commit: 5ad1500

lfades
lfades reviewed Dec 10, 2020
View reviewed changes
examples/with-pullstate/pages/_app.js Outdated
Comment on lines 6 to 12
const instance =
typeof window === 'undefined'
? PullstateCore.instantiate({ ssr: true })
: PullstateCore.instantiate({
ssr: false,
hydrateSnapshot: pageProps.hydrateSnapshot,
})
Copy link
Member

@lfades lfades Dec 10, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this going to create a new instance every time App re-renders? Ignore my comment if that doesn't matter. But it might be bad if that means the previous state is ignored.

lfades
lfades requested changes Dec 10, 2020
View reviewed changes
Copy link
Member

@lfades lfades left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xeoneux Hi there 👋 and thank you for the PR!

Let's make sure to show the store working in different rendering methods, like in the with-redux example, where the store is used for both SSR and static pages, and navigations work without any issues.

@vercel vercel bot temporarily deployed to Preview December 11, 2020 00:36 Inactive
@xeoneux
Copy link
Author

xeoneux commented Dec 11, 2020

Hi @lfades thanks for the review, I have updated the example with a demo for ssg and ssr pages

@ijjk
Copy link
Member

ijjk commented Dec 11, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary xeoneux/next.js canary Change
buildDuration 8.3s 8.5s ⚠️ +241ms
nodeModulesSize 82.5 MB 82.5 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary xeoneux/next.js canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.047 2.038 -0.01
/ avg req/sec 1221.57 1226.85 +5.28
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.078 1.102 ⚠️ +0.02
/error-in-render avg req/sec 2319.51 2267.6 ⚠️ -51.91
Client Bundles (main, webpack, commons)
vercel/next.js canary xeoneux/next.js canary Change
677f882d2ed8..34b9.js gzip 12.8 kB 12.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-3e8cb31..cddc.js gzip 6.56 kB 6.56 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 59 kB 59 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary xeoneux/next.js canary Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary xeoneux/next.js canary Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-01375..90b6.js gzip 3.69 kB 3.69 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB ✓
routerDirect..fd29.js gzip 303 B 303 B ✓
withRouter-b..76ae.js gzip 302 B 302 B ✓
Overall change 8.31 kB 8.31 kB ✓
Client Build Manifests
vercel/next.js canary xeoneux/next.js canary Change
_buildManifest.js gzip 322 B 322 B ✓
Overall change 322 B 322 B ✓
Rendered Page Sizes
vercel/next.js canary xeoneux/next.js canary Change
index.html gzip 614 B 614 B ✓
link.html gzip 620 B 620 B ✓
withRouter.html gzip 608 B 608 B ✓
Overall change 1.84 kB 1.84 kB ✓
Serverless Mode
General
vercel/next.js canary xeoneux/next.js canary Change
buildDuration 9.9s 9.9s -41ms
nodeModulesSize 82.5 MB 82.5 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary xeoneux/next.js canary Change
677f882d2ed8..34b9.js gzip 12.8 kB 12.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-3e8cb31..cddc.js gzip 6.56 kB 6.56 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 59 kB 59 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary xeoneux/next.js canary Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary xeoneux/next.js canary Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-01375..90b6.js gzip 3.69 kB 3.69 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB ✓
routerDirect..fd29.js gzip 303 B 303 B ✓
withRouter-b..76ae.js gzip 302 B 302 B ✓
Overall change 8.31 kB 8.31 kB ✓
Client Build Manifests
vercel/next.js canary xeoneux/next.js canary Change
_buildManifest.js gzip 322 B 322 B ✓
Overall change 322 B 322 B ✓
Serverless bundles
vercel/next.js canary xeoneux/next.js canary Change
_error.js 1 MB 1 MB ✓
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.16 MB 5.16 MB ✓
Commit: 73763b7

@vercel vercel bot temporarily deployed to Preview December 11, 2020 00:47 Inactive
@xeoneux xeoneux mentioned this pull request Dec 11, 2020
Open
@ijjk
Copy link
Member

ijjk commented Dec 11, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary xeoneux/next.js canary Change
buildDuration 8.2s 8.5s ⚠️ +306ms
nodeModulesSize 82.5 MB 82.5 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary xeoneux/next.js canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.158 2.19 ⚠️ +0.03
/ avg req/sec 1158.64 1141.68 ⚠️ -16.96
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.116 1.131 ⚠️ +0.01
/error-in-render avg req/sec 2239.73 2211.37 ⚠️ -28.36
Client Bundles (main, webpack, commons)
vercel/next.js canary xeoneux/next.js canary Change
677f882d2ed8..34b9.js gzip 12.8 kB 12.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-3e8cb31..cddc.js gzip 6.56 kB 6.56 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 59 kB 59 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary xeoneux/next.js canary Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary xeoneux/next.js canary Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-01375..90b6.js gzip 3.69 kB 3.69 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB ✓
routerDirect..fd29.js gzip 303 B 303 B ✓
withRouter-b..76ae.js gzip 302 B 302 B ✓
Overall change 8.31 kB 8.31 kB ✓
Client Build Manifests
vercel/next.js canary xeoneux/next.js canary Change
_buildManifest.js gzip 322 B 322 B ✓
Overall change 322 B 322 B ✓
Rendered Page Sizes
vercel/next.js canary xeoneux/next.js canary Change
index.html gzip 614 B 614 B ✓
link.html gzip 620 B 620 B ✓
withRouter.html gzip 608 B 608 B ✓
Overall change 1.84 kB 1.84 kB ✓
Serverless Mode
General
vercel/next.js canary xeoneux/next.js canary Change
buildDuration 10s 9.8s -229ms
nodeModulesSize 82.5 MB 82.5 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary xeoneux/next.js canary Change
677f882d2ed8..34b9.js gzip 12.8 kB 12.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-3e8cb31..cddc.js gzip 6.56 kB 6.56 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 59 kB 59 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary xeoneux/next.js canary Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary xeoneux/next.js canary Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB ✓
_error-01375..90b6.js gzip 3.69 kB 3.69 kB ✓
hooks-d4591d..e7c2.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB ✓
routerDirect..fd29.js gzip 303 B 303 B ✓
withRouter-b..76ae.js gzip 302 B 302 B ✓
Overall change 8.31 kB 8.31 kB ✓
Client Build Manifests
vercel/next.js canary xeoneux/next.js canary Change
_buildManifest.js gzip 322 B 322 B ✓
Overall change 322 B 322 B ✓
Serverless bundles
vercel/next.js canary xeoneux/next.js canary Change
_error.js 1 MB 1 MB ✓
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.16 MB 5.16 MB ✓
Commit: b0a780f

lfades
lfades reviewed Dec 13, 2020
View reviewed changes
examples/with-pullstate/pages/_app.js
import { useHydrate } from '../stores'

export default function App({ Component, pageProps }) {
const instance = useHydrate(pageProps.snapshot)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's give this another name, like useStore.

lfades
lfades reviewed Dec 13, 2020
View reviewed changes
examples/with-pullstate/components/dark-mode-demo.js
Comment on lines +8 to +27
<div
style={{
backgroundColor: isDarkMode ? '#333' : '#CCC',
color: isDarkMode ? '#CCC' : '#333',
}}
>
<h1>Pullstate Demo</h1>

<p>Dark Mode is {isDarkMode ? 'On' : 'Off'}</p>

<button
onClick={() =>
UIStore.update((s) => {
s.isDarkMode = !s.isDarkMode
})
}
>
Toggle Dark Mode
</button>
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component should have links to the other pages, that's important to see how all pages work together while the app is running.

lfades
lfades requested changes Dec 13, 2020
View reviewed changes
Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added 2 more suggestions 🙏

@timneutkens
Copy link
Member

Going to close this as the PR is stale. Happy to merge when the changes are made.

@Raamzeez
Copy link

Any progress made on this? Really would like to use Pullstate with Next.JS but there are no good examples.

@lfades
Copy link
Member

lfades commented Jun 3, 2021

@Raamzeez The PR was closed and examples are managed by the community, feel free to contribute

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lfades lfades lfades requested changes

@chibicode chibicode Awaiting requested review from chibicode

@ijjk ijjk Awaiting requested review from ijjk

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
examples Issue was opened via the examples template.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@xeoneux @ijjk @timneutkens @Raamzeez @lfades