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.

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

With Firebase Client-Side example #11053

Merged
merged 11 commits into from
Mar 20, 2020

Conversation

julianbenegas
Copy link
Contributor

@julianbenegas julianbenegas commented Mar 13, 2020

Why another Firebase example? This is a very simple one, but I think it would be good because all other Firebase examples use a custom server or serverless APIs, and maybe overcomplicate some stuff. Having started learing Next.js and Firebase with one of those examples, I've simplified my setup a lot over time. Client side Firebase is way easier!

On another note, I know that examples are done to showcase more special use cases, and there's nothing special about this. But it may be helpful only because the other set ups are, in my opinion, harder for someone getting started.

(sorry for the changed title of the PR. I'm new to contributing and thought I was doing a PR to my forked repo, haha)

@julianbenegas julianbenegas changed the title initialized example. Why did I create another branch for this 😂? With Firebase Client-Side example Mar 13, 2020
@ijjk
Copy link
Member

ijjk commented Mar 13, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 9.9s 10s ⚠️ +70ms
nodeModulesSize 56.6 MB 56.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.96 kB 2.96 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.06 kB 2.06 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
index.html gzip 916 B 916 B
link.html gzip 925 B 925 B
withRouter.html gzip 913 B 913 B
Overall change 2.75 kB 2.75 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 10.6s 10.6s ⚠️ +17ms
nodeModulesSize 56.6 MB 56.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.96 kB 2.96 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.06 kB 2.06 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_error.js gzip 293 kB 293 kB -2 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 957 B 957 B
index.js gzip 294 kB 293 kB -502 B
link.js gzip 301 kB 301 kB -88 B
routerDirect.js gzip 300 kB 299 kB -499 B
withRouter.js gzip 300 kB 300 kB -90 B
Overall change 1.49 MB 1.49 MB -1.18 kB

to get only needed firebase modules
@ijjk
Copy link
Member

ijjk commented Mar 13, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 9.6s 10s ⚠️ +401ms
nodeModulesSize 56.6 MB 56.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.96 kB 2.96 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.06 kB 2.06 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
index.html gzip 916 B 916 B
link.html gzip 925 B 925 B
withRouter.html gzip 913 B 913 B
Overall change 2.75 kB 2.75 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 10.5s 10.7s ⚠️ +169ms
nodeModulesSize 56.6 MB 56.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.96 kB 2.96 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.06 kB 2.06 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_error.js gzip 294 kB 294 kB -73 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 957 B 957 B
index.js gzip 293 kB 293 kB ⚠️ +5 B
link.js gzip 301 kB 301 kB -607 B
routerDirect.js gzip 300 kB 300 kB -182 B
withRouter.js gzip 300 kB 299 kB -606 B
Overall change 1.49 MB 1.49 MB -1.46 kB

@lfades
Copy link
Member

lfades commented Mar 13, 2020

Hi @julianbenegas Thank you for the PR. I really like that it's simple and doesn't have any custom server or getInitialProps. Have you checked the other Firebase examples? I'm asking because I would like todo a cleanup of those that aren't useful or are very outdated.

@julianbenegas
Copy link
Contributor Author

julianbenegas commented Mar 13, 2020

Thanks @lfades ! I have checked the other Firebase examples. Some are hard to figure out. I remember, back then I started with this one which is the simplest, but still fairly complicated, in my opinion.

For me, it's not necessary to get the user as an initial prop, which is what the other examples try to do (if I understand correctly). Having it client side is just fine. The user is persisted on route changed, so nothing to worry about on that side.

@ijjk
Copy link
Member

ijjk commented Mar 18, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 9.1s 8.9s -202ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
index.html gzip 916 B 916 B
link.html gzip 924 B 924 B
withRouter.html gzip 913 B 913 B
Overall change 2.75 kB 2.75 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 9.9s 9.8s -3ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_error.js gzip 293 kB 293 kB ⚠️ +52 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 957 B 957 B
index.js gzip 293 kB 293 kB ⚠️ +178 B
link.js gzip 301 kB 301 kB -566 B
routerDirect.js gzip 299 kB 300 kB ⚠️ +504 B
withRouter.js gzip 300 kB 300 kB ⚠️ +182 B
Overall change 1.49 MB 1.49 MB ⚠️ +350 B

@ijjk
Copy link
Member

ijjk commented Mar 18, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 11.6s 11.9s ⚠️ +208ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
index.html gzip 916 B 916 B
link.html gzip 924 B 924 B
withRouter.html gzip 913 B 913 B
Overall change 2.75 kB 2.75 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 12.9s 12.7s -178ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_error.js gzip 293 kB 293 kB -20 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 957 B 957 B
index.js gzip 294 kB 293 kB -787 B
link.js gzip 302 kB 301 kB -265 B
routerDirect.js gzip 300 kB 300 kB ⚠️ +241 B
withRouter.js gzip 300 kB 299 kB -536 B
Overall change 1.49 MB 1.49 MB -1.37 kB

@ijjk
Copy link
Member

ijjk commented Mar 19, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 11.4s 11.4s -24ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
index.html gzip 916 B 916 B
link.html gzip 924 B 924 B
withRouter.html gzip 913 B 913 B
Overall change 2.75 kB 2.75 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 12.7s 12.8s ⚠️ +34ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_error.js gzip 294 kB 293 kB -735 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 957 B 957 B
index.js gzip 293 kB 294 kB ⚠️ +318 B
link.js gzip 302 kB 302 kB ⚠️ +3 B
routerDirect.js gzip 299 kB 300 kB ⚠️ +461 B
withRouter.js gzip 300 kB 299 kB -530 B
Overall change 1.49 MB 1.49 MB -483 B

@ijjk
Copy link
Member

ijjk commented Mar 19, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 9.8s 10.1s ⚠️ +331ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
index.html gzip 916 B 916 B
link.html gzip 924 B 924 B
withRouter.html gzip 913 B 913 B
Overall change 2.75 kB 2.75 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
buildDuration 11.3s 11.6s ⚠️ +306ms
nodeModulesSize 53.2 MB 53.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.js gzip 1.09 kB 1.09 kB
_error.js gzip 2.97 kB 2.97 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary julianbenegas/next.js example-firebase-client-side Change
_error.js gzip 293 kB 293 kB -6 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 957 B 957 B
index.js gzip 294 kB 294 kB ⚠️ +343 B
link.js gzip 301 kB 301 kB -560 B
routerDirect.js gzip 300 kB 300 kB -104 B
withRouter.js gzip 300 kB 300 kB -162 B
Overall change 1.49 MB 1.49 MB -489 B

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.

@julianbenegas Thank you for the PR, it looks great now 💯

I've updated a bit the readme and also renamed the example to be with-firebase

@nerdogram
Copy link

nerdogram commented May 7, 2020

Hi @julianbenegas Thank you for the PR. I really like that it's simple and doesn't have any custom server or getInitialProps. Have you checked the other Firebase examples? I'm asking because I would like todo a cleanup of those that aren't useful or are very outdated.

Thanks for this. Right now I count 5 firebase examples and it's really confusing for a new comer like me to decide which one to start with. Can you please do a cleanup and add documentation to the Readme explaining the tradeoffs /best practices used and which factors we should consider before picking one?

The tricky thing with authentication is a bad/misinformed decision now can cause a lot of pain way down the line and a lot more effort to fix for the developer. So it's a worthy investment to have great starters for firebase with all the best practices and latest tech (getServerSideProps or getStaticProps or getInitialProps?) baked in.

@nerdogram
Copy link

nerdogram commented May 7, 2020

@julianbenegas I have and it's confusing to me as a newbie. Especially the next.js part: should it be a custom server or serverless or client side? I don't even understand what you mean when you say have it just client side. When I opened up your repo it just had a title and description and its unclear at least to me what the firebase part is doing here. I'm looking for a starter with leveraging firebase for authentication: so a login/sign up form etc.

@julianbenegas
Copy link
Contributor Author

@alvisanovari I think the most simple by far is the with-firebase one. Start with that.

Firebase auth always starts client side (well, every auth system 🤔), so there are no security compromises. "Client side" just means "when your site is loaded and available to your user".

The thing that other examples do is store the auth token in cookies and stuff. Then retreive those server side the next time the user comes. Remember, no official answer here so I might be wrong.

The thing that this example does is store the user in React Context (like a global state). There's no server side. Javascript boots up and then I'm retrieving the user. Other ways may be faster (haven't tested though) but this is simpler.

Neither have security compromises. Firebase is built to work client side.

I hope this helps.

@cordial-canary
Copy link

@julianbenegas Thanks for creating this example! I have a couple questions.

  • Why does UserContext.Provider expose the setUser function? I'd think that you'd only ever want the auth listener to set the user. Is there some use case that I'm missing?

  • Is there a technical reason for returning () => unsubscriber() from the useEffect handler instead of just returning the unsubscriber function directly?

@julianbenegas
Copy link
Contributor Author

julianbenegas commented May 7, 2020

Hi @cordial-canary

  • imagine a user updating it's displayName. In that case, it's common to update it locally (feels instant) before the "real one" gets updated.
  • I don't think so. It slipped by!

@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants