Ask coding questions

← Back to all posts
How to change pages without refresh like repl.it?
DREWNOLT (27)

I have noticed on repl.it, that when you create or go to one of your repls, it changes the page, but doesn't involve refreshing or any browser loading. How do I do this?

(On a different issue, on one of my node js servers, it takes forever to load a certain page, and when it does load, it shows the page when the repl has been made, but isn't open to HTTP traffic(even though the repl is running). What is wrong with it, and how do I fix it?)

Comments
hotnewtop
19wintersp (1120)

This uses the History API, more specifically pushState. pushState allows you to create an entry in the page's history (what you see when holding down the back or forward buttons) without actually reloading to that page. The JavaScript code is expected to load the content, possibly using something like fetch. If the user presses back or forwards, you will receive a popState event, and are expected to load back the other content. The traditional way of doing this (as used in HackTalk) was with URI fragments: the "#..." bit at the end of some URIs. Changing the fragment will not reload the page.

DREWNOLT (27)

@19wintersp the example doesn't seem to work...

19wintersp (1120)

@DREWNOLT Looks like my site was down, a Replit issue (my site is a static HTML repl); it's back now

xxpertHacker (871)

Node.js is slow, it's a weird, non-standard JavaScript runtime.

First of all, write faster JS, and your server will run faster.

I've got an HTTP server over here, https://codepoint.xxperthacker.repl.co, and it goes pretty fast; but it's not a fair comparison, since I didn't use JS.

As for your bug, you probably forgot to send data back, can you link the Repl?

And lastly, as for how Repl.it loads pages quickly, it uses client-side JavaScript to intercept button presses and loads without reloading the web page. Similar to a SPA.

DREWNOLT (27)

@xxpertHacker https://repl.it/@DREWNOLT/ReplCoin This is the page that goes super slow and glitches: https://replcoin.drewnolt.repl.co/home/?user=tlond
Also, could you give a code example for how to do what replit does with the pages?

xxpertHacker (871)

@DREWNOLT I've helped implement a very trivial page swapping at https://hacktalk.epicgamer007.repl.co, sign in, and notice that switching between profiles and questions doesn't do a full refresh.

We mostly used CSS, but usually people use JS.

The script responsible for swapping: https://hacktalk.epicgamer007.repl.co/scripts/profile.mjs

19wintersp (1120)

@DREWNOLT ReplCoin has a few issues, though first I'd recommend looking into express.static and EJS. You're using readFileSync a lot, often unnecessarily and without caching. Look into fs.promises for file reads, and try to set up some kind of cache. Part of your issues are likely because you're using files to store data, which will be rolled back by Replit if you're not on the repl when the edits happen. Try to find a database to store this data instead.