<div id="readability-page-1" class="page"><article id="article-show-container" data-article-id="1572343" data-article-slug="a-some-undocumented-about-server-component-408d" data-author-id="201866" data-author-name="Composite" data-author-username="composite" data-co-author-ids="" data-path="/composite/a-some-undocumented-about-server-component-408d" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false">
 <header id="main-title">

 <div>
 <a href="/composite"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i7tYDRmB--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/201866/5014b724-95d6-43af-8561-79a14911a196.png" width="40" height="40" alt="Composite"></a>
 
 
 </div>
 </header>

 <div data-article-id="1572343" id="article-body">
 The Server Component of Next.js is stateless component that it can get some request parameters: Headers and cookies. 
But, There is no way to get other parameters such as <code>request.url</code>.

I don't understand why limited to get properties in Server Components. someone says you're not ready to use App Router yet. 
I agree. Server component is future of React, but it's still experimental feature.

While I'm using App Router, I found a way of get some properties in server component, Let's get started.
<h2>
 <a name="what-header-contains-in-server-components" href="#what-header-contains-in-server-components">
 </a>
 What Header contains in Server Components?
</h2>

I ran <code>console.log()</code> in a server component like below: 


<div>
<pre><code>export const debugHeaders = () =&gt; {
 const list = headers();
 console.table(Array.from(list.entries()));
};
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



And I found the following header key Let's see what it contains.

<ul>
<li>
<code>host</code>: A real hostname of server. If you are using the app behind reverse proxy, do not use it.</li>
<li>
<code>x-forwarded-proto</code>: A forwarded protocol of reverse proxy server. use it if you want check <code>HTTPS</code> behind reverse proxy.</li>
<li>
<code>x-forwarded-host</code>: A forwarded real hostname behind a reverse proxy. use it if you are using the app behind reverse proxy.</li>
<li>
<code>x-middleware-invoke</code>: It seems that show some infomation when proceed with middleware of Next.js.</li>
<li>
<code>x-invoke-path</code>: A </li>
<li>
<code>x-invoke-query</code>: A URL encoded query string with JSON. call <code>DecodeURLComponent</code> and <code>JSON.parse</code> If you want use.</li>
<li>
<code>x-invoke-output</code>: Not sure what it is.</li>
</ul>

Depending on your server environment, the header key may be different, so be sure to extract and verify it yourself.

<h2>
 <a name="get-raw-requesturl-endraw-and-query-string-in-server-component" href="#get-raw-requesturl-endraw-and-query-string-in-server-component">
 </a>
 Get <code>request.url</code> and query string in Server Component
</h2>

Based on the header information above, I made function to take in the URL and query string. 


<div>
<pre><code>import { headers } from 'next/headers';

export const url = () =&gt; {
 const header = headers();
 return `${header.get('x-forwarded-proto') || (header.get('https') &amp;&amp; 'https') || 'http'}://${header.get('x-forwarded-host') || header.get('host')}/${header.get('x-invoke-path')}`
}

export const query = () =&gt; {
 const header = headers();
 return JSON.parse(decodeURIComponent(header.get('x-invoke-query')!)) as Record&lt;string, string&gt;
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



Have fun and Happy Next.js'ing!


 </div>
 
 



 </article></div>

Ukjin Yang

The Server Component of Next.js is stateless component that it can get some request parameters: Headers and cookies.
request.url.
I don't understand why limited to get properties in Server Components. someone says you're not ready to use App Router yet.
While I'm using App Router, I found a way of get some properties in server component, Let's get started.
I ran console.log() in a server component like below:
export const debugHeaders = () => {
 const list = headers();
 console.table(Array.from(list.entries()));
};
And I found the following header key Let's see what it contains.
host: A real hostname of server. If you are using the app behind reverse proxy, do not use it.
x-forwarded-proto: A forwarded protocol of reverse proxy server. use it if you want check HTTPS behind reverse proxy.
x-forwarded-host: A forwarded real hostname behind a reverse proxy. use it if you are using the app behind reverse proxy.
x-middleware-invoke: It seems that show some infomation when proceed with middleware of Next.js.
x-invoke-path: A 
x-invoke-query: A URL encoded query string with JSON. call DecodeURLComponent and JSON.parse If you want use.
x-invoke-output: Not sure what it is.
Depending on your server environment, the header key may be different, so be sure to extract and verify it yourself.
request.url and query string in Server Component
Based on the header information above, I made function to take in the URL and query string.
import { headers } from 'next/headers';
export const url = () => {
 const header = headers();
 return `${header.get('x-forwarded-proto') || (header.get('https') && 'https') || 'http'}://${header.get('x-forwarded-host') || header.get('host')}/${header.get('x-invoke-path')}`
}
export const query = () => {
 const header = headers();
 return JSON.parse(decodeURIComponent(header.get('x-invoke-query')!)) as Record<string, string>
}
Have fun and Happy Next.js'ing!

A Some undocumented about Server Component

댓글