René's URL Explorer Experiment


Title: Full Stack Lifecycle - Nullstack

Open Graph Title: Full Stack Lifecycle - Nullstack

Description: Lifecycle methods are special named functions that you can declare in the class.

Open Graph Description: Lifecycle methods are special named functions that you can declare in the class.

Opengraph URL: https://nullstack.app/full-stack-lifecycle

Generator: Created with Nullstack - https://nullstack.app

direct link

Domain: nullstack.app

og:imagehttps://nullstack.app/image-1200x630.png
og:typewebsite
og:site_nameNullstack
og:localeen-US
mobile-web-app-capableyes
apple-mobile-web-app-capableyes
application-nameNullstack
apple-mobile-web-app-titleNullstack
msapplication-starturl/
msapplication-TileColor#2d3748
nullstack{"page":{"image":"/image-1200x630.png","status":200,"locale":"en-US","title":"Full Stack Lifecycle - Nullstack","description":"Lifecycle methods are special named functions that you can declare in the class."},"environment":{"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"23ad2dd940244ab04e281282c05613bd73043c4f","name":""},"settings":{},"worker":{"enabled":true,"fetching":false,"preload":["/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/frequently-asked-questions","/full-stack-lifecycle","/getting-started","/how-to-customize-webpack","/how-to-deploy-a-nullstack-application","/jsx-elements","/nullstack-logo","/persistent-components","/proxy","/refs","/routes-and-params","/script-runner","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/stateless-components","/static-site-generation","/styles","/transpilation-and-security","/two-way-bindings","/typescript","/what-is-nullstack","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"staleWhileRevalidate":[],"cacheFirst":[],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true},"params":{"slug":"full-stack-lifecycle"},"project":{"domain":"nullstack.app","name":"Nullstack","color":"#d22365","viewport":"width=device-width, initial-scale=1, shrink-to-fit=no","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"},"instances":{"application":{"persistent":false},"Header/0-0-0-0":{"expanded":false,"persistent":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Documentation","href":"/getting-started"},{"title":"Examples","href":"/examples"},{"title":"Contributors","href":"/contributors"},{"title":"F.A.Q","href":"/frequently-asked-questions"},{"title":"Waifu","href":"/waifu"}],"menu":{"title":"Toggle Menu"},"action":{"title":"Get Started","href":"/getting-started"},"search":{"title":"Search [ctrl + k]"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"Article/0-0-0-18/full-stack-lifecycle":{"title":"Full Stack Lifecycle","html":"

Lifecycle methods are special named functions that you can declare in the class.<\\/p>\n

Each lifecycle method runs in a specific order in a queue so it's guaranteed that all components initiated in that cycle will be prepared before the first one is initiated.<\\/p>\n

Prepare<\\/a><\\/h2>

This method is blocking and runs before the first time the component is rendered.<\\/p>\n

You can use this function to set the state that the user will see before things are loaded.<\\/p>\n

If the user is entering from this route prepare<\\/code> will run in the server before Nullstack server-side renders<\\/a> your application.<\\/p>\n

If the user is navigating from another route this method will run in the client.<\\/p>\n

import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  // ...<\\/span>\n\n  prepare<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    this<\\/span>.<\\/span>date =<\\/span> new<\\/span> Date<\\/span>(<\\/span>)<\\/span>;<\\/span>\n  }<\\/span>\n\n  // ...<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n
Initiate<\\/a><\\/h2>
This method can be async and runs right after the component is prepared and rendered for the first time.<\\/p>\n
You can use this function to invoke another server function and load the data to present the page.<\\/p>\n
If the user is entering from this route initiate<\\/code> will run in the server.<\\/p>\n
Nullstack will wait till the promise is resolved and then finally generate the HTML that will be served.<\\/p>\n
If the user is navigating from another route this method will run in the client.<\\/p>\n
After this method promise is fulfilled this.initiated<\\/code> will be set to true<\\/p>\n
import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  // ...<\\/span>\n\n  async<\\/span> initiate<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    this<\\/span>.<\\/span>task =<\\/span> await<\\/span> getTaskByDay<\\/span>(<\\/span>{<\\/span>\n      day<\\/span>:<\\/span> this<\\/span>.<\\/span>date\n    }<\\/span>)<\\/span>;<\\/span>\n  }<\\/span>\n\n  render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    if<\\/span>(<\\/span>!<\\/span>this<\\/span>.<\\/span>initiated)<\\/span> return<\\/span> false<\\/span>\n    return<\\/span> (<\\/span>\n      <<\\/span>p<\\/span>><\\/span><\\/span> {<\\/span>this<\\/span>.<\\/span>task.<\\/span>description}<\\/span> </<\\/span>p<\\/span>><\\/span><\\/span>\n    )<\\/span>\n  }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n
\n
✨ Learn more about server functions<\\/a>.<\\/p>\n<\\/blockquote>\n
Launch<\\/a><\\/h2>
Runs before pre-rendering and at each awakening.<\\/p>\n
You can update the component with things that doesn't require data fetching operations.<\\/p>\n
\n
✨ Use this lifecycle to setup Meta tags.<\\/p>\n<\\/blockquote>\n
import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  // ...<\\/span>\n\n  launch<\\/span>(<\\/span>{<\\/span> page }<\\/span><\\/span>)<\\/span> {<\\/span>\n    page.<\\/span>title =<\\/span> 'Very good title that considers SEO'<\\/span>\n  }<\\/span>\n\n  // ...<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n
Hydrate<\\/a><\\/h2>
This method is async and will only run in the client.<\\/p>\n
This method will always run no matter which environment started the component.<\\/p>\n
This is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.<\\/p>\n
After this method promise is fulfilled this.hydrated<\\/code> will be set to true<\\/p>\n
import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  // ...<\\/span>\n\n  async<\\/span> hydrate<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    this<\\/span>.<\\/span>timer =<\\/span> setInterval<\\/span>(<\\/span>(<\\/span>)<\\/span> =><\\/span> {<\\/span>\n      console.<\\/span>log<\\/span>(<\\/span>this<\\/span>.<\\/span>date)<\\/span>;<\\/span>\n    }<\\/span>,<\\/span> 1000<\\/span>)<\\/span>;<\\/span>\n  }<\\/span>\n\n  render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    if<\\/span>(<\\/span>!<\\/span>this<\\/span>.<\\/span>hydrated)<\\/span> return<\\/span> false<\\/span>\n    return<\\/span> (<\\/span>\n      <<\\/span>p<\\/span>><\\/span><\\/span> timer id:<\\/span> {<\\/span>this<\\/span>.<\\/span>timer}<\\/span> </<\\/span>p<\\/span>><\\/span><\\/span>\n    )<\\/span>\n  }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n
Update<\\/a><\\/h2>
This method is async and will only run in the client.<\\/p>\n
This method runs on every component anytime the application state changes.<\\/p>\n
\n
🔥 Be careful not to cause infinite loopings when mutating state inside update<\\/code>.<\\/p>\n<\\/blockquote>\n
This will run right before rendering but will not block the rendering queue.<\\/p>\n
The update<\\/code> function will not start running until the application is rendered after the initiate<\\/code>.<\\/p>\n
import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  // ...<\\/span>\n\n  async<\\/span> update<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    const<\\/span> today =<\\/span> new<\\/span> Date<\\/span>(<\\/span>)<\\/span>;<\\/span>\n    if<\\/span>(<\\/span>today.<\\/span>getDay<\\/span>(<\\/span>)<\\/span> !=<\\/span> this<\\/span>.<\\/span>date.<\\/span>getDay<\\/span>(<\\/span>)<\\/span>)<\\/span> {<\\/span>\n      this<\\/span>.<\\/span>date =<\\/span> today;<\\/span>\n      await<\\/span> this<\\/span>.<\\/span>initiate<\\/span>(<\\/span>)<\\/span>;<\\/span>\n    }<\\/span>\n  }<\\/span>\n\n  // ...<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n
\n
✨ Lifecycle methods have no special side effects, you can call them manually without causing problems.<\\/p>\n<\\/blockquote>\n
Terminate<\\/a><\\/h2>
This method is async and will only run in the client.<\\/p>\n
This method will run after your component leaves the DOM.<\\/p>\n
This is the place to clean up whatever you set up in the hydrate<\\/code> method.<\\/p>\n
The instance will be garbage collected after the Promise<\\/code> is resolved.<\\/p>\n
After this method promise is fulfilled this.terminated<\\/code> will be set to true which is useful in the case of persistent components<\\/a><\\/p>\n
import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Component<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n  // ...<\\/span>\n\n  async<\\/span> terminate<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    clearInterval<\\/span>(<\\/span>this<\\/span>.<\\/span>timer)<\\/span>;<\\/span>\n  }<\\/span>\n\n  executeBackgroundTask<\\/span>(<\\/span>)<\\/span> {<\\/span>\n    if<\\/span>(<\\/span>!<\\/span>this<\\/span>.<\\/span>terminated)<\\/span> {<\\/span>\n      // ...<\\/span>\n    }<\\/span>\n  }<\\/span>\n\n  // ...<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Component;<\\/span>\n<\\/code><\\/pre>\n","persistent":true,"locale":"en-US","i18n":{"lead":"Have any questions or suggestions?","cta":"Join our Discord","next":"Next Step","learn":"Learn more about"},"description":"Lifecycle methods are special named functions that you can declare in the class.","topics":[{"title":"About Nullstack","links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Getting started","href":"/getting-started"}]},{"title":"Core Features","links":[{"title":"Stateless Components","href":"/stateless-components"},{"title":"Stateful components","href":"/stateful-components"},{"title":"Full stack lifecycle","href":"/full-stack-lifecycle"},{"title":"Server functions","href":"/server-functions"},{"title":"Context","href":"/context"},{"title":"Two-way bindings","href":"/two-way-bindings"},{"title":"JSX elements","href":"/jsx-elements"},{"title":"Refs","href":"/refs"},{"title":"Styles","href":"/styles"},{"title":"Persistent Components","href":"/persistent-components"}]},{"title":"Context Keys","links":[{"title":"Routes and params","href":"/routes-and-params"},{"title":"Context data","href":"/context-data"},{"title":"Context instances","href":"/context-instances"},{"title":"Context environment","href":"/context-environment"},{"title":"Context page","href":"/context-page"},{"title":"Context project","href":"/context-project"},{"title":"Context settings","href":"/context-settings"},{"title":"Context secrets","href":"/context-secrets"},{"title":"Server request and response","href":"/server-request-and-response"},{"title":"Service Worker","href":"/service-worker"}]},{"title":"Advanced concepts","links":[{"title":"Proxy","href":"/proxy"},{"title":"Application Startup","href":"/application-startup"},{"title":"Script runner","href":"/script-runner"},{"title":"How to customize Webpack","href":"/how-to-customize-webpack"},{"title":"Transpilation and Security","href":"/transpilation-and-security"},{"title":"TypeScript","href":"/typescript"}]},{"title":"Build Modes","links":[{"title":"Server-side rendering","href":"/server-side-rendering"},{"title":"Static site generation","href":"/static-site-generation"},{"title":"Single page applications","href":"/single-page-applications"}]},{"title":"Other","links":[{"title":"Nullstack Logo","href":"/nullstack-logo"},{"title":"How to deploy","href":"/how-to-deploy-a-nullstack-application"}]}]},"GoogleAnalytics/0-0-0-19":{"persistent":false},"Loader/0-0-0-21":{"persistent":false},"Footer/0-0-0-22":{"persistent":false,"locale":"en-US","i18n":{"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}],"star":{"story":"Want to show your love and help us spread the word?","action":"Leave a star on GitHub"}}}},"context":{"mode":"light","oppositeMode":"dark"}}

Links:

Nullstack https://nullstack.app/
What is Nullstack?https://nullstack.app/what-is-nullstack
Documentationhttps://nullstack.app/getting-started
Exampleshttps://nullstack.app/examples
Contributorshttps://nullstack.app/contributors
F.A.Qhttps://nullstack.app/frequently-asked-questions
Waifuhttps://nullstack.app/waifu
Portuguêshttps://nullstack.app/pt-br
🇧🇷https://nullstack.app/pt-br
https://discord.gg/eDZfKz264v
Starhttps://github.com/nullstack/nullstack
What is Nullstack?https://nullstack.app/what-is-nullstack
Getting startedhttps://nullstack.app/getting-started
Stateless Componentshttps://nullstack.app/stateless-components
Stateful componentshttps://nullstack.app/stateful-components
Full stack lifecyclehttps://nullstack.app/full-stack-lifecycle
Server functionshttps://nullstack.app/server-functions
Contexthttps://nullstack.app/context
Two-way bindingshttps://nullstack.app/two-way-bindings
JSX elementshttps://nullstack.app/jsx-elements
Refshttps://nullstack.app/refs
Styleshttps://nullstack.app/styles
Persistent Componentshttps://nullstack.app/persistent-components
Routes and paramshttps://nullstack.app/routes-and-params
Context datahttps://nullstack.app/context-data
Context instanceshttps://nullstack.app/context-instances
Context environmenthttps://nullstack.app/context-environment
Context pagehttps://nullstack.app/context-page
Context projecthttps://nullstack.app/context-project
Context settingshttps://nullstack.app/context-settings
Context secretshttps://nullstack.app/context-secrets
Server request and responsehttps://nullstack.app/server-request-and-response
Service Workerhttps://nullstack.app/service-worker
Proxyhttps://nullstack.app/proxy
Application Startuphttps://nullstack.app/application-startup
Script runnerhttps://nullstack.app/script-runner
How to customize Webpackhttps://nullstack.app/how-to-customize-webpack
Transpilation and Securityhttps://nullstack.app/transpilation-and-security
TypeScripthttps://nullstack.app/typescript
Server-side renderinghttps://nullstack.app/server-side-rendering
Static site generationhttps://nullstack.app/static-site-generation
Single page applicationshttps://nullstack.app/single-page-applications
Nullstack Logohttps://nullstack.app/nullstack-logo
How to deployhttps://nullstack.app/how-to-deploy-a-nullstack-application
Preparehttps://nullstack.app/full-stack-lifecycle#prepare
server-side rendershttps://nullstack.app/server-side-rendering
Initiatehttps://nullstack.app/full-stack-lifecycle#initiate
server functionshttps://nullstack.app/server-functions
Launchhttps://nullstack.app/full-stack-lifecycle#launch
Hydratehttps://nullstack.app/full-stack-lifecycle#hydrate
Updatehttps://nullstack.app/full-stack-lifecycle#update
Terminatehttps://nullstack.app/full-stack-lifecycle#terminate
persistent componentshttps://nullstack.app/persistent-components
Next Step https://nullstack.app/full-stack-lifecycle#next-step
Core Features: Server functionshttps://nullstack.app/server-functions
Join our Discordhttps://discord.gg/eDZfKz264v
https://twitter.com/nullstackapp
https://github.com/nullstack/nullstack
https://discord.gg/eDZfKz264v
https://www.youtube.com/nullstack
https://www.linkedin.com/company/nullstack-app
Leave a star on GitHubhttps://github.com/nullstack/nullstack/stargazers

Viewport: width=device-width, initial-scale=1, shrink-to-fit=no

URLs of crawlers that visited me.