nullstack.github.io/docs/full-stack-lifecycle/index.json at gh-pages · nullstack/nullstack.github.io

1 lines (1 loc) · 20.6 KB

{"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>\nEach 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<h2 id=\"prepare\"><a href=\"#prepare\">Prepare<\\/a><\\/h2>This method is blocking and runs before the first time the component is rendered.<\\/p>\nYou can use this function to set the state that the user will see before things are loaded.<\\/p>\nIf the user is entering from this route <code>prepare<\\/code> will run in the server before Nullstack <a href=\"/server-side-rendering\">server-side renders<\\/a> your application.<\\/p>\nIf the user is navigating from another route this method will run in the client.<\\/p>\n<pre><code class=\"language-jsx\">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<h2 id=\"initiate\"><a href=\"#initiate\">Initiate<\\/a><\\/h2>This method can be async and runs right after the component is prepared and rendered for the first time.<\\/p>\nYou can use this function to invoke another server function and load the data to present the page.<\\/p>\nIf the user is entering from this route <code>initiate<\\/code> will run in the server.<\\/p>\nNullstack will wait till the promise is resolved and then finally generate the HTML that will be served.<\\/p>\nIf the user is navigating from another route this method will run in the client.<\\/p>\nAfter this method promise is fulfilled <code>this.initiated<\\/code> will be set to true<\\/p>\n<pre><code class=\"language-jsx\">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<blockquote>\n✨ Learn more about <a href=\"/server-functions\">server functions<\\/a>.<\\/p>\n<\\/blockquote>\n<h2 id=\"launch\"><a href=\"#launch\">Launch<\\/a><\\/h2>Runs before pre-rendering and at each awakening.<\\/p>\nYou can update the component with things that doesn't require data fetching operations.<\\/p>\n<blockquote>\n✨ Use this lifecycle to setup Meta tags.<\\/p>\n<\\/blockquote>\n<pre><code class=\"language-jsx\">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<h2 id=\"hydrate\"><a href=\"#hydrate\">Hydrate<\\/a><\\/h2>This method is async and will only run in the client.<\\/p>\nThis method will always run no matter which environment started the component.<\\/p>\nThis is a good place to trigger dependencies that manipulate the dom or can only run on the client-side.<\\/p>\nAfter this method promise is fulfilled <code>this.hydrated<\\/code> will be set to true<\\/p>\n<pre><code class=\"language-jsx\">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<h2 id=\"update\"><a href=\"#update\">Update<\\/a><\\/h2>This method is async and will only run in the client.<\\/p>\nThis method runs on every component anytime the application state changes.<\\/p>\n<blockquote>\n🔥 Be careful not to cause infinite loopings when mutating state inside <code>update<\\/code>.<\\/p>\n<\\/blockquote>\nThis will run right before rendering but will not block the rendering queue.<\\/p>\nThe <code>update<\\/code> function will not start running until the application is rendered after the <code>initiate<\\/code>.<\\/p>\n<pre><code class=\"language-jsx\">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<blockquote>\n✨ Lifecycle methods have no special side effects, you can call them manually without causing problems.<\\/p>\n<\\/blockquote>\n<h2 id=\"terminate\"><a href=\"#terminate\">Terminate<\\/a><\\/h2>This method is async and will only run in the client.<\\/p>\nThis method will run after your component leaves the DOM.<\\/p>\nThis is the place to clean up whatever you set up in the <code>hydrate<\\/code> method.<\\/p>\nThe instance will be garbage collected after the <code>Promise<\\/code> is resolved.<\\/p>\nAfter this method promise is fulfilled <code>this.terminated<\\/code> will be set to true which is useful in the case of <a href=\"/persistent-components\">persistent components<\\/a><\\/p>\n<pre><code class=\"language-jsx\">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"}}}},"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."}}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

index.json

Latest commit

History

index.json

File metadata and controls