With Firebase Client-Side example #11053
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
julianbenegas
changed the title
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
to get only needed firebase modules
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
|
Hi @julianbenegas Thank you for the PR. I really like that it's simple and doesn't have any custom server or |
|
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. |
lfades
reviewed
Mar 18, 2020
lfades
reviewed
Mar 18, 2020
Also, initialize app in a separate file. Much cleaner.
Co-Authored-By: Luis Alvarez D. <luis@zeit.co>
…ianbenegas/next.js into example-firebase-client-side
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
| 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 | |
| 404.html gzip | 1.32 kB | 1.32 kB | ✓ |
| hooks.html gzip | 957 B | 957 B | ✓ |
| index.js gzip | 293 kB | 293 kB | |
| link.js gzip | 301 kB | 301 kB | -566 B |
| routerDirect.js gzip | 299 kB | 300 kB | |
| withRouter.js gzip | 300 kB | 300 kB | |
| Overall change | 1.49 MB | 1.49 MB |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
lfades
approved these changes
Mar 20, 2020
There was a problem hiding this comment.
@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
This was referenced Apr 13, 2020
This was referenced Apr 22, 2020
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. |
|
@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. |
|
@alvisanovari I think the most simple by far is the 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. |
|
@julianbenegas Thanks for creating this example! I have a couple questions.
|
|
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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)