# QRL
QRL (Qwik URL) is a particular form of URL that Qwik uses to lazy load content.
QRLs:
- are specially formatted URLs that are left as attributes in the HTML to tell Qwik where the handlers for the code should be loaded from.
- point to a JavaScript chunk to be lazy-loaded.
- Contain a symbol name which needs to be retrieved from the chunk.
- May contain lexically scoped object references. (Captured variables from closures.)
- If relative, use `q:base` for resolution.
## QRL Encoding
```
./path/to/chunk.js#SymbolName
```
In its simplest form, the QRL contains a URL (such as `./path/to/chunk.js`) that the browser can use to lazy-load a resource, and a `SymbolName` to retrieve from the lazy-loaded chunk.
Qwik uses `q:base` to resolve a QRL into an absolute URL if the URL is relative. (If no `q:base` attribute is present, then `document.baseURI` is used as a base.)
## Encoding lexically scoped captured variables
QRLs can also restore lexically scoped variables. In that case, the variables are encoded in the QRL at the end in the form of an array of indexes into the `q:obj` attribute.
```
./path/to/chunk.js#SymbolName[0,1]
```
The array is used by `useLexicalScope()` to restore the variables.
### Example
Let's look at an example of how all of the pieces of the QRL tie together.
The developer writes code for a simple component.
```tsx
export const Counter = component$((props: { step: number }) => {
const count = useSignal(0);
return ;
});
```
The optimizer breaks above code into pieces like so:
```tsx
const Counter = component(qrl('./chunk-a.js', 'Counter_onMount'));
```
```tsx title="chunk-a.js"
export const Counter_onMount = (props) => {
const count = useSignal(0);
return qrl('./chunk-b.js', 'Counter_onRender', [count, props]);
};
```
```tsx title="chunk-b.js"
const Counter_onRender = () => {
const [count, props] = useLexicalScope();
return (
);
};
```
```tsx title="chunk-c.js"
const Counter_onClick = () => {
const [count, props] = useLexicalScope();
return (count.value += props.step || 1);
};
```
### Rendered HTML
After the above code gets executed, it produces this HTML.
Assume: `http://localhost/index.html`
```html
```
The main thing to note is the `q-e:click` attribute. This attribute gets read by the Qwikloader when the user clicks on the button.
1. HTML is loaded in the browser, and Qwikloader registers a global `click` listener. No other JavaScript is loaded/executed at this point.
2. User clicks on the `