Accessing URL fragments in Next JS with context during the execution of getServerSideProps

I am trying to extract a URL fragment using getServerSideProps. The URL is structured like this: 

http://localhost:3000/some-folder#desiredParam=value

Even though I pass the context as an argument to the getServerSideProps function, I am struggling to retrieve the URL parameter because it's not in the format of 

http://localhost:3000/some-folder?desiredParam=value
. If it were, I could simply use context.query.desiredParam

When I try using context.query.url, it returns /some-folder, and context.query gives me null.

If only I could access the entire window.location, I would split the string by #. Unfortunately, that's not possible with getServerSideProps.

So my question remains: what steps can I take to retrieve the value of desiredParam?

typescriptnext.jsserver-side-rendering

Answer №1

The concept of a URL fragment is specific to the client-side environment.

Unlike other parts of the URL, the fragment is not included in the HTTP GET-request. This means it can be modified without triggering any server requests. This behavior is not determined by your framework but is actually defined by fundamental web standards. Client-side frameworks do not encounter this issue since they operate on the client side.

If you require server-side content to be influenced by the fragment, you will need to extract this information on the client side and transmit it to the server through alternative methods.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a Single Xpath instead of Multiple paths

I'm currently working with Protractor alongside TypeScript. I have an element located at: xpath = "**//div[@class='loglist']/div[1]/div[2]**" Afterwards, there are additional elements that need to be identified in different divs s ...

typescriptseleniumxpathprotractor

Can [] be considered a valid type in Typescript language?

I've come across this function: function stringToArray(s: string|[]): [] { return typeof s === 'string' ? JSON.parse(s.replace(/'/g, '"')) : s; } This function is functioning as expected without any type warnings. Bu ...

typescript

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Currently I am working on an Ionic/Angular application and I have encountered a situation where I am attempting to utilize ngModel. Essentially, I am trying to implement the following functionality within my app: <ion-list> <ion-item> <ion ...

javascriptangulartypescriptionic-framework

Is there a way to enforce a mandatory lambda argument?

I am trying to pass a lambda into a function, but I need the lambda to have only one argument. TypeScript correctly generates an error if I provide two parameters to the lambda, however it does not raise any issues if I leave out any arguments altogether ...

typescript

Positive SWR genetic alteration

I am currently developing a small application that allows users to sign up for karaoke music. To fetch information from a mongoDB, I am using SWR, but facing performance issues. In an attempt to improve the user interface, I am trying to implement optimist ...

mongodbapinext.jsvercelswr

AngularFire 2 dispatching email for password reset

I am looking to add a feature for resetting passwords or handling forgotten passwords using AngularFire2. It looks like the function sendPasswordResetEmail is either not available in AngularFire2 or the typings have not been updated yet. I tried accessing ...

typescriptangularangularfire2

The GraphQl Code Generator fails to correctly generate the graphql() function in Next.js applications

While working on my next.js project, I integrated GraphQL to generate types for queries. However, the code generator is not functioning properly and displaying an error message: "The query argument is unknown! Please regenerate the types." within the gql.t ...

reactjstypescriptnext.jsgraphqlgraphql-codegen

The security rules in Firebase Firestore appear to be completely ineffective

Having just recently started using Firebase, I'm facing some confusion or a potential issue with my Firebase account. After integrating a Firestore Database into my Firebase app, I initially set it up in test mode. According to the documentation I&ap ...

firebasegoogle-cloud-firestorenext.jsfirebase-security

Transforming class attributes in Typescript

I am facing a situation where I need to alter the type of a variable that stores an object based on certain conditions. Here is the variable in question: class MyClass { public referrers: SelectItemGroup[]; } The issue arises when I only need to add a ...

arraystypescriptcasting

Exploring how to retrieve data using a fetch query within a React component

I am currently using jest to write tests for fetching and posting data from a react page. I have written a test but I'm uncertain about how to ensure that the correct data is passed through the specific component. The test in question looks like this ...

reactjsjestjsnext.jsenzymereact-testing-library

Different middleware in next.js for enhanced functionality

My file structure is as follows: app -> [locale] -> (admin) [dashboard] page.js - (shop) page.js I am looking to implement clerk for the dashboard and its subpages, while using next-intl for all other pages. I came across the following code in the c ...

next.jsclerknext-intl

Next.js router query not returning the expected value

Upon initial loading of the Edit page, I encountered an issue where the query was returning as 'undefined' instead of the expected result. It's important to note that I am employing client-side fetching and not utilizing SSG or SSR. The &apo ...

next.js

Troubleshooting React/Jest issues with updating values in Select elements on onChange event

I am currently testing the Select element's value after it has been changed with the following code: it("changes value after selecting another field", () => { doSetupWork(); let field = screen.getByLabelText("MySelectField") ...

javascriptreactjstypescriptjestjs

The TypeError encountered in an Ionic pipe states that the property 'toString' cannot be read as it is undefined

I have a news application built in Ionic 4. The pubDate property of the UutinenPage class is being asynchronously assigned a value of data.items[this.id].pubDate in the uutinen.page.ts file. The expected format of this value is something like 2019-02-19 04 ...

angulartypescriptionic4

Revamping an npm package on GitHub

Currently, I am managing a project that has gained popularity among users and has received contributions from multiple individuals. The next step I want to take is to convert the entire library into TypeScript, but I am unsure of the best approach to ach ...

javascriptgittypescriptgithubnpm

Changing data types conditionally in Angular using TypeScript

My angular component relies on the API Response for its functionality. I receive these responses from an external API. When there are no errors Data : { Status: string; Data: number; } When an error occurs, this is what I get. Data : { Status: string; ...

typescripttypes

Create various dynamic paths using the Link component in Next.js

In my Next.js project using React, I need to navigate through a link structured like this: https://<mydomain>/campaigns/<some hash number>/pearks To organize my pages, I created the following folder structure: pages |_campaigns | ...

reactjsnext.js

Encountering a Npm ERR! when deploying Angular 6 to Heroku due to missing Start script

I am experiencing an issue with my simple angular 6 app after deploying it to Heroku. When I check the logs using the command heroku logs, I encounter the following error: 2018-07-15T00:45:51.000000+00:00 app[api]: Build succeeded 2018-07-15T00:45:53.9012 ...

javascriptangulartypescriptherokunpm

Currently, ReactMarkdown is unable to support rendering capabilities

When using a markdown file to load data initially, I want to render images in a div tag and follow default behavior for paragraphs if no image is present. const customRenderers = { paragraph(paragraph) { const {node} = paragraph ...

reactjsnext.js

Encountering error 2307 "Cannot find module" when using Vue 3 with script setup and TypeScript

I am currently attempting to run unit tests in my Vue3 project using vue/test-utils and jest. Upon running the npm run test script, the test fails due to an error with the import: error TS2307: Cannot find module 'pathtofile/file.vue' I have tr ...

typescriptvue.jsjestjsvuejs3