https://shakacode.com/component---src-template-doc-article-tsx-con…server-rendering-md-45def0d89e10c8f79ebf.js

1"use strict";(self.webpackChunkgatsby_starter_default=self.webpackChunkgatsby_starter_default||[]).push([[5],{81271:function(e,n,a){a.r(n),a.d(n,{Head:function(){return f},default:function(){return k}});var s=a(28453),t=a(96540);function o(e){const n=Object.assign({h2:"h2",a:"a",span:"span",div:"div",p:"p",svg:"svg",path:"path",strong:"strong",h3:"h3",h4:"h4"},(0,s.R)(),e.components);return t.createElement(t.Fragment,null,t.createElement(n.h2,{id:"how-to-use-different-versions-of-a-file-for-client-and-server-rendering",style:{position:"relative"}},t.createElement(n.a,{href:"#how-to-use-different-versions-of-a-file-for-client-and-server-rendering","aria-label":"how to use different versions of a file for client and server rendering permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"How to use different versions of a file for client and server rendering"),"\n",t.createElement(n.div,{className:"markdown-alert markdown-alert-note",dir:"auto"},"\n",t.createElement(n.p,{className:"markdown-alert-title",dir:"auto"},t.createElement(n.svg,{className:"octicon",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true"},t.createElement(n.path,{d:"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"})),"NOTE"),"\n",t.createElement(n.p,null,t.createElement(n.strong,null,"React Server Components (RSC) users:")," With RSC, server components run exclusively on the server and client components handle browser interactivity. This component model eliminates the need for separate ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.server/.client</code>'}})," file variants. Using file variants with RSC can cause issues — see the ",t.createElement(n.a,{href:"../core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md#8-component-with-serverclient-variants-used-with-rsc"},"auto-bundling troubleshooting guide")," for details."),"\n"),"\n",t.createElement(n.p,null,"There are 3 main ways to use different code for server vs. client rendering."),"\n",t.createElement(n.h2,{id:"a-using-different-entry-points",style:{position:"relative"}},t.createElement(n.a,{href:"#a-using-different-entry-points","aria-label":"a using different entry points permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"A. Using different Entry Points"),"\n",t.createElement(n.p,null,"Many projects will have different entry points for client and server rendering. This only works for a top-level entry point such as the entry point for a React Router app component."),"\n",t.createElement(n.p,null,"Your Client Entry can look like this:"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> ReactOnRails <span class="token keyword">from</span> <span class="token string">\'react-on-rails/client\'</span><span class="token punctuation">;</span>\n<span class="token keyword">

1import</span> App <span class="token keyword">from</span> <span class="token string">\'./ClientApp\'</span><span class="token punctuation">;</span>\nReactOnRails<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> App <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(n.p,null,"So your Server Entry can look like:"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> ReactOnRails <span class="token keyword">from</span> <span class="token string">\'react-on-rails\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">\'./ServerApp\'</span><span class="token punctuation">;</span>\nReactOnRails<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> App <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(n.p,null,"Note that the only difference is in the imports."),"\n",t.createElement(n.h2,{id:"b-two-options-for-using-webpack-resolve-alias-in-the-webpack-config",style:{position:"relative"}},t.createElement(n.a,{href:"#b-two-options-for-using-webpack-resolve-alias-in-the-webpack-config","aria-label":"b two options for using webpack resolve alias in the webpack config permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"B. Two Options for Using Webpack Resolve Alias in the Webpack Config"),"\n",t.createElement(n.p,null,"Per ",t.createElement(n.a,{href:"https://webpack.js.org/configuration/resolve/#resolve-alias"},"Webpack Docs"),"."),"\n",t.createElement(n.h3,{id:"1-update-webpackset-resolvejs-to-have-a-different-resolution-for-the-exact-file",style:{position:"relative"}},t.createElement(n.a,{href:"#1-update-webpackset-resolvejs-to-have-a-different-resolution-for-the-exact-file","aria-label":"1 update webpackset resolvejs to have a different resolution for the exact file permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. Update ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">webpack/set-resolve.js</code>'}})," to have a different resolution for the exact file"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">setResolve</span><span class="token punctuation">(</span><span class="token parameter">builderConfig<span class="token punctuation">,</span> webpackConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n\n  <span class="token comment">// Use a different resolution for Client and Server file</span>\n  <span class="token keyword">let</span> SomeJsFile<span class="token punctuation">;</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>builderConfig<span class="token punctuation">.</span>serverRendering<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    SomeJsFile <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../bundles/SomeJsFileServer"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n    SomeJsFile <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../bundles/SomeJsFileClient"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n <span class="token keyword">const</span> resolve <span class="token operator">=</span> <span class="token punctuation">{</span>\n    <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>

1\n      <span class="token comment">// ... other aliases</span>\n      SomeJsFile<span class="token punctuation">,</span>\n      <span class="token comment">// ... other aliases</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.p,null,"Then you have this import:"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> SomeJsFile <span class="token keyword">from</span> <span class="token string">\'SomeJsFile\'</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(n.h3,{id:"2-use-a-different-resolution-for-the-right-directory-of-client-or-server-files",style:{position:"relative"}},t.createElement(n.a,{href:"#2-use-a-different-resolution-for-the-right-directory-of-client-or-server-files","aria-label":"2 use a different resolution for the right directory of client or server files permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2. Use a different resolution for the right directory of client or server files"),"\n",t.createElement(n.h4,{id:"a-update-webpackset-resolvejs-to-have-something-like",style:{position:"relative"}},t.createElement(n.a,{href:"#a-update-webpackset-resolvejs-to-have-something-like","aria-label":"a update webpackset resolvejs to have something like permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"a. Update ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">webpack/set-resolve.js</code>'}})," to have something like"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">setResolve</span><span class="token punctuation">(</span><span class="token parameter">builderConfig<span class="token punctuation">,</span> webpackConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n\n  <span class="token comment">// Use a different resolution for Client and Server file</span>\n  <span class="token keyword">let</span> variant<span class="token punctuation">;</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>builderConfig<span class="token punctuation">.</span>serverRendering<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    variant <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../bundles/variant/ServerOnly"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n    variant <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../bundles/variant/ClientOnly"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n <span class="token keyword">const</span> resolve <span class="token operator">=</span> <span class="token punctuation">{</span>\n    <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>

1\n      <span class="token comment">// ... other aliases</span>\n      variant<span class="token punctuation">,</span>\n      <span class="token comment">// ... other aliases</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>'}}),"\n",t.createElement(n.h4,{id:"b-add-different-versions-of-the-file-to-the-bundlesvariantclientonly-and-bundlesvariantserveronly-directories",style:{position:"relative"}},t.createElement(n.a,{href:"#b-add-different-versions-of-the-file-to-the-bundlesvariantclientonly-and-bundlesvariantserveronly-directories","aria-label":"b add different versions of the file to the bundlesvariantclientonly and bundlesvariantserveronly directories permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"b. Add different versions of the file to the ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">bundles/variant/ClientOnly</code>'}})," and ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">bundles/variant/ServerOnly</code>'}})," directories"),"\n",t.createElement(n.h4,{id:"c-use-the-variant-in-import-in-a-file-that-can-be-used-both-for-client-and-server-rendering",style:{position:"relative"}},t.createElement(n.a,{href:"#c-use-the-variant-in-import-in-a-file-that-can-be-used-both-for-client-and-server-rendering","aria-label":"c use the variant in import in a file that can be used both for client and server rendering permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"c. Use the ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">variant</code>'}})," in import in a file that can be used both for client and server rendering"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">import</span> SomeJsFile <span class="token keyword">from</span> <span class="token string">\'variant/SomeJsFile\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> AnotherJsFile <span class="token keyword">from</span> <span class="token string">\'variant/AnotherJsFile\'</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(n.h2,{id:"c-conditional-code-that-can-check-if-window-is-defined",style:{position:"relative"}},t.createElement(n.a,{href:"#c-conditional-code-that-can-check-if-window-is-defined","aria-label":"c conditional code that can check if window is defined permalink",className:"anchor before"},t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"C. Conditional code that can check if ",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">window</code>'}})," is defined."),"\n",t.createElement(n.p,null,"This is probably the ugliest and hackiest way to do this, but it's quick! Essentially you wrap code that cannot execute server side in a conditional:"),"\n",t.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token comment">// window should be falsy on the server side</span>\n  <span class="token function">doSomethingClientOnly</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token comment">

1// or do an import</span>\n  <span class="token keyword">const</span> foobar <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'foobar\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}))}var l=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,s.R)(),e.components);return n?t.createElement(n,e,t.createElement(o,e)):o(e)},r=a(63679),i=a(95197),c=a(47388),p=a(23690),u=a(14487);const d=r.default.p.withConfig({displayName:"doc-article__RedirectFallback",componentId:"sc-tic2w5-0"})(["padding:2rem;"]),h=e=>{let{data:n,location:a,children:s}=e;const{headings:o}=n.article.childMdx,l=(0,i.X9)(a.pathname),[r,p]=t.useState(null),h=a.pathname.split("/"),k=h.indexOf("docs"),f=-1===k?a.pathname.length:h.slice(0,k+1).join("/").length,m=a.pathname.slice(0,f),g=a.pathname.slice(f+1).replace(/\/$/,"").split("/").filter((e=>""!==e)),v=g.length>1?g.slice(0,-1).join("/"):"";t.useEffect((()=>{if(!l)return;const{hash:e}=window.location;p(e);const n=""+l+e;window.location.href!==n&&window.location.replace(n)}),[l]);const y=null===l||null===r?null:""+l+r;return t.createElement(t.Fragment,null,null!==y?t.createElement(d,{role:"status","aria-live":"polite"},"Redirecting..."," ",t.createElement("a",{href:y,target:"_blank",rel:"noopener noreferrer"},"Click here if not redirected.")):t.createElement(c.A,{main:t.createElement(u.A,{body:s,headings:o,transformUrl:e=>{if(e.startsWith("http")||e.startsWith("#"))return e;const n=e.replace(/\.md$/,"/");if(n.startsWith("./"))return m+(""===v?"":"/"+v)+n.slice(1);if(n.startsWith("../")){if(""===v)return""+m+n.slice(2);const e=v.split("/").slice(0,-1).join("/");return m+(""===e?"":"/"+e)+n.slice(2)}return m+"/"+(""===v?"":v+"/")+n}})}))};function k(e){return t.createElement(h,e,t.createElement(l,e))}const f=e=>{let{data:n,location:a,pageContext:s}=e;const{headings:o}=n.article.childMdx,{siteUrl:l}=n.site.siteMetadata,{repoDisplayName:r}=s,c=o.find((e=>1===e.depth)),u=(0,i.X9)(a.pathname)||""+l.replace(/\/+$/,"")+a.pathname;return t.createElement(p.A,{title:c?c.value:r,description:c?c.value:r+" documentation",isArticle:!0,canonical:u,pathname:a.pathname})}}}]);
2//# sourceMappingURL=component---src-template-doc-article-tsx-content-file-path-cache-gatsby-source-git-react-on-rails-docs-oss-building-features-how-to-use-different-files-for-client-and-server-rendering-md-45def0d89e10c8f79ebf.js.map